ตรวจสอบสรุป CSS Hack ล่าสุดอย่างรวดเร็ว

บล็อกเบราว์เซอร์ IE (นั่นคือจะไม่แสดงภายใต้ IE)

*:lang(zh) select {font:12px !important;} /*พิเศษสำหรับ FF*/
เลือก:ว่าง {แบบอักษร:12px !สำคัญ;} /*safari มองเห็นได้*/

ในที่นี้ Select คือตัวเลือก ซึ่งสามารถเปลี่ยนแปลงได้ตามสถานการณ์ ประโยคที่สองเป็นลักษณะเฉพาะของเบราว์เซอร์ Safari บน MAC

ยอมรับโดย IE7 เท่านั้น

*+html {…}

คุณสามารถใช้แฮ็กนี้เมื่อคุณต้องการสร้างสไตล์สำหรับ IE7 เท่านั้น

บัตรประจำตัว IE6 และต่ำกว่า

* html {…}

ให้ความสนใจเป็นพิเศษกับประเด็นนี้ เจ้าของบ้านหลายรายเขียนว่าเป็นแฮ็กสำหรับ IE6 จริงๆ แล้ว IE5.x ก็สามารถจดจำแฮ็กนี้ได้ เบราว์เซอร์อื่นไม่รู้จักมัน

html/**/ >body เลือก {……}

ประโยคนี้มีผลเช่นเดียวกับประโยคก่อนหน้า

มีเพียง IE6 เท่านั้นที่ไม่รู้จักมัน

เลือก { จอแสดงผล /*IE6 ไม่รู้จัก*/:none;}

สิ่งสำคัญที่นี่คือการแยกแอตทริบิวต์และค่าผ่านความคิดเห็น CSS ซึ่งเผยแพร่ก่อนเครื่องหมายทวิภาค

ไม่รู้จักเฉพาะ IE6 และ IE5

select/**/ { display /*IE6, IE5 ไม่รู้จัก*/:none;}

ความแตกต่างจากประโยคข้างต้นคือมีความคิดเห็น CSS เพิ่มเติมระหว่างตัวเลือกและเครื่องหมายปีกกา

มีเพียง IE5 เท่านั้นที่ไม่รู้จักมัน

select/*IE5 ไม่รู้จัก*/ { จอแสดงผล: ไม่มี;}

ประโยคนี้เป็นความคิดเห็นในพื้นที่แอตทริบิวต์ที่ถูกลบออกจากประโยคก่อนหน้า มีเพียง IE5 เท่านั้นที่ไม่รู้จักมัน

โซลูชันโมเดลกล่อง

เลือก {width:IE5.x width; voice-family :""}"";

วิธีการเคลียร์ของโมเดลกล่องไม่ได้รับการจัดการผ่าน !สำคัญ สิ่งนี้จะต้องมีความชัดเจน

ลอยชัดเจน

เลือก: หลังจาก {เนื้อหา:""; แสดง: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง;

ใน Firefox เมื่อลูกทั้งหมดลอย ความสูงของพาเรนต์ไม่สามารถครอบคลุมลูกทั้งหมดได้ จากนั้นใช้แฮ็กนี้เพื่อล้างการลอยเพื่อกำหนดพาเรนต์หนึ่งครั้ง จากนั้นปัญหานี้จะได้รับการแก้ไข

การตัดทอนจุดไข่ปลา

เลือก { -o-text-overflow:ellipsis; text-overflow:ellipsis;

นี่เป็นเทคนิคที่ดีมากที่จะตัดข้อความส่วนเกินออกโดยอัตโนมัติหลังจากที่มีความยาวเกิน และปิดท้ายด้วยจุดไข่ปลา เพียงแต่ว่า Firefox ยังไม่รองรับในขณะนี้

ได้รับการยอมรับจาก Opera เท่านั้น

@media ทั้งหมด และ (ความกว้างขั้นต่ำ: 0px){ เลือก {……} }

ทำการตั้งค่าแยกต่างหากสำหรับเบราว์เซอร์ Opera

ข้างต้นคือแฮ็กบางส่วนในการเขียน CSS สิ่งเหล่านี้ใช้เพื่อแก้ไขปัญหาความเข้ากันได้ในท้องถิ่น หากคุณต้องการแยกเนื้อหาที่เข้ากันได้ คุณอาจลองใช้ตัวกรองต่อไปนี้ ตัวกรองเหล่านี้บางตัวเขียนด้วย CSS เพื่อนำเข้าสไตล์พิเศษผ่านฟิลเตอร์ และบางตัวเขียนด้วย HTML เพื่อเชื่อมโยงหรือนำเข้าสไตล์แพทช์ที่จำเป็นผ่านเงื่อนไข

ตัวกรองสำหรับ IE5.x จะมองเห็นได้เฉพาะ IE5.x เท่านั้น

โดยทั่วไปไม่จำเป็นต้องใช้ตัวกรอง IE5/MAC

IE เป็นการแฮ็กแบบมีเงื่อนไข

<!--[ถ้า IE]> เฉพาะ IE เท่านั้น <![endif]-->

IE ทั้งหมดรู้จัก

<!--[ถ้า IE 5.0]> เฉพาะ IE 5.0 เท่านั้น <![endif]-->

มีเพียง IE5.0 เท่านั้นที่สามารถจดจำได้

<!--[ถ้า gt IE 5.0]> เฉพาะ IE 5.0+ เท่านั้น <![endif]-->

IE5.0 สามารถรับรู้ได้โดย IE5.5

<!--[ถ้า lt IE 6]> เฉพาะ IE 6- <![endif]-->

ได้รับการยอมรับโดย IE6 เท่านั้น

<!--[ถ้า gte IE 6]> เฉพาะ IE 6/+ เท่านั้น <![endif]-->

สามารถรับรู้ได้โดย IE6 และ IE5.x ต่ำกว่า IE6

<!--[ถ้า lte IE 7]> เฉพาะ IE 7/- <![endif]-->

ยอมรับโดย IE7 เท่านั้น

เนื้อหาข้างต้นอาจไม่ครอบคลุม คุณสามารถเข้าร่วมกับฉันในการสรุปเทคนิคเหล่านี้เพื่อความสะดวกในการสอบถามข้อมูลการทำงานในอนาคต ขณะเดียวกัน ฉันอยากจะขอบคุณผู้เขียนที่ได้ค้นคว้า HACK เหล่านี้