เมื่อผู้คนคุ้นเคยกับบางสิ่งบางอย่างแล้ว การเปลี่ยนแปลงก็เป็นเรื่องยาก ด้วยเหตุผลหลายประการ ทำให้มีเบราว์เซอร์ใหม่ๆ มากขึ้นเรื่อยๆ แต่เบราว์เซอร์เก่าไม่สามารถกำจัดออกไปได้ การเติบโตนั้นเร็วกว่าความตายเสมอ ส่งผลให้ความเข้ากันได้ของเบราว์เซอร์กลายเป็นหัวข้อที่ไม่มีที่สิ้นสุด เมื่อพูดถึงความเข้ากันได้ของเบราว์เซอร์ CSS HACK มักจะนึกถึง ในปัจจุบัน เรามักจะมีทีมงานหรือทีมงานที่ทำสิ่งเดียวกันในบริษัท เราจำเป็นต้องมีข้อกำหนดแบบรวมสำหรับการเขียนโค้ดเพื่ออำนวยความสะดวกในการบำรุงรักษา วิธีแก้ไขความเข้ากันได้คือ (ต้องเป็นเนื่องจากนี่มีแนวโน้มที่จะมีปัญหามากที่สุด) หนึ่งในข้อกำหนดที่สำคัญที่สุดที่ต้องแก้ไข
ในแง่ของโซลูชันความเข้ากันได้ หากเราต้องการกำหนดข้อกำหนดที่เป็นหนึ่งเดียว โดยส่วนตัวแล้วฉันคิดว่าสามประเด็นต่อไปนี้ควรเป็นหลักการพื้นฐาน:
การให้ความสำคัญกับต้นทุนเป็นอันดับแรกไม่ได้หมายความว่าเราไม่เต็มใจที่จะไล่ตามความสมบูรณ์แบบ แต่การจงใจแสวงหาความสมบูรณ์แบบมากเกินไปในบางครั้งอาจเป็นอุปสรรคต่อความก้าวหน้าของเรา หลังจากต้นทุนแล้ว มันควรจะสามารถบำรุงรักษาและอ่านได้ ซึ่งเป็นสิ่งสำคัญมากสำหรับความร่วมมือในทีมถือเป็นสิ่งสำคัญ และ ผลลัพธ์ที่ได้คือการลดต้นทุน
มาบันทึกหลักการทั้งสามข้อนี้ก่อน และดูวิธีการเขียนตามปกติของเราเพื่อแก้ไขปัญหาที่เข้ากันได้ (รายการโดยละเอียดของวิธีการแฮ็กจะแนบมาในภายหลัง):
1. แฮ็คตัวเลือก CSS
/* โอเปร่า */
@media ทั้งหมด และ (-webkit-min-device-pixel-ratio:10,000) ไม่ใช่ทั้งหมด และ (-webkit-min-device-pixel-ratio:0)
{หัว~ร่างกาย .sofish {display:block;}}
ข้อดีและข้อเสียของการเขียนแบบนี้คือ :
2. การแฮ็กทรัพย์สิน CSS
.โซฟิช{
ช่องว่างภายใน:10px;
การขยาย:9px9; /* ทั้งหมด เช่น */
การขยาย:8px ; /* ie8-9 */
*ช่องว่างภายใน:5px; /* ie6-7 */
+ช่องว่างภายใน:7px; /* ie7 */
_padding:6px; /* ie6 */
-
ข้อดีและข้อเสียของการเขียนแบบนี้คือ :