1. "การใช้สิ่งสำคัญใน IE6 และ FF"
.box1 {ความกว้าง:150px !สำคัญ;}
.box1 {ความกว้าง:250px;}
!สำคัญ หมายความว่าการตั้งค่านี้มีลำดับความสำคัญ IE จะไม่เกิดข้อผิดพลาดเมื่อพบ !สำคัญ และเพิกเฉยต่อฟังก์ชัน หากตั้งค่าความกว้างในภายหลัง IE จะใช้ความกว้างที่ตั้งไว้ล่าสุดเป็นเกณฑ์ หากไม่มีการตั้งค่าอื่น ๆ ในภายหลัง มันจะใช้ค่าปัจจุบันซึ่งเป็นค่า !important ก่อนหน้า ตัวอย่างเช่น: #test {width: 300px !important} ทั้ง IE และ FF แสดง 300PX หากมีค่าต่อท้าย IE จะแสดงค่าต่อไปนี้ และ FF จะแสดงค่าโดยมี !import นำหน้า!
เบราว์เซอร์อื่นๆ ถือว่าสิ่งนี้สำคัญ เนื่องจากความสัมพันธ์ที่มีลำดับความสำคัญ ความกว้างที่ตั้งไว้ก่อนหน้านี้จะมีผลเหนือกว่าเสมอ
#test {ความกว้าง:300px;ความกว้าง:400px !สำคัญ ;}
ผลลัพธ์ที่แสดงในประโยคนี้คือความกว้างของ IE และ FF คือทั้ง 400PX
#test {ความกว้าง:300px !สำคัญ ;ความกว้าง:400px;}
ผลลัพธ์ที่แสดงของประโยคนี้คือ FF: 300px IE: 400px
ดังนั้นเวลาใช้ !important ให้ใส่คำที่มี !important นำหน้าด้วย
แต่ปัญหากลับมาอีกครั้ง IE7 สามารถจดจำได้แล้ว !สำคัญ โปรดดูด้านล่าง!
2. รูปแบบ CSS สำหรับ Firefox ie6 ie7
ปัจจุบันส่วนใหญ่ใช้ !important สำหรับการแฮ็ก การทดสอบ ie6 และ firefox สามารถแสดงผลได้ตามปกติ แต่ ie7 สามารถตีความ !important ได้อย่างถูกต้อง ซึ่งจะทำให้ไม่สามารถแสดงเพจได้ตามที่ต้องการ! ฉันพบแฮ็คที่ดีสำหรับ IE7 โดยใช้ "*+html" ตอนนี้เรียกดูด้วย IE7 และไม่น่าจะมีปัญหา
ตอนนี้เขียน CSS เช่นนี้:
#1 { สี: #333; } /* โมซ */
* html #1 { สี: #666 } /* IE6 */
*+html #1 { สี: #999 } /* IE7 */
จากนั้นสีตัวอักษรจะแสดงเป็น #333 ภายใต้ Firefox, #666 ภายใต้ IE6 และ #999 ภายใต้ IE7 คุณสามารถใช้ "+" เพื่อใช้งาน CSS Hack ที่เพื่อนบางคนอาจคิดว่าใช้การแฮ็ก "_" แต่มีความโดดเด่นเนื่องจากไม่รู้จัก "_" ใน IE7 เลยใช้ +.
ผลการทดสอบ:
เบราว์เซอร์ IE5.5, IE6 และ IE7 สามารถจดจำได้
เบราว์เซอร์ FF2.0, Opera 9 และ Safari 2 ไม่รู้จักมัน
3. แฮ็ค IE7
IE7 ได้แก้ไขข้อบกพร่องมากมายและเพิ่มการรองรับสำหรับตัวเลือกบางตัว ดังนั้นตอนนี้การแฮ็กเพื่อซ่อนหรือแสดง IE เช่น *html {}, html>body {}, !important ฯลฯ จะไม่ทำงานใน IE7 แม้ว่าจะไม่แนะนำการแฮ็ก CSS และความคิดเห็นแบบมีเงื่อนไขเป็นตัวกรองที่เข้าใจผิดได้ แต่ความคิดเห็นแบบมีเงื่อนไขสามารถปรากฏใน HTML เท่านั้น ดังนั้นการแฮ็ก CSS ยังคงมีอยู่ Nanobot ค้นพบ CSS Hacks สำหรับ IE7 โดยเฉพาะ:
>ร่างกาย
html*
*+html
จากวิธีการเขียนทั้งสามวิธีนี้ สองวิธีแรกเป็นวิธีการเขียน CSS ที่ผิดกฎหมายและถูกละเว้นในเบราว์เซอร์ที่ได้มาตรฐาน แต่ IE7 ไม่คิดเช่นนั้น สำหรับ >body มันจะแทนที่ตัวเลือกที่หายไปด้วยตัวเลือกส่วนกลาง * นั่นคือมันจะถูกประมวลผลเป็น *>body และปรากฏการณ์นี้ไม่เพียงเกิดขึ้นกับตัวเลือก > เท่านั้น แต่ยังรวมถึงตัวเลือก + และ ~ ด้วย สำหรับ html* เนื่องจากไม่มีช่องว่างระหว่าง html และ * จึงถือเป็นข้อผิดพลาดทางไวยากรณ์ CSS เช่นกัน แต่ IE7 จะไม่เพิกเฉย แต่เชื่ออย่างเข้าใจผิดว่ามีช่องว่างอยู่ที่นี่ สำหรับประเภทที่สาม *+html นั้น IE7 เชื่อว่าการประกาศ DTD ที่หน้า html ก็เป็นองค์ประกอบหนึ่งเช่นกัน ดังนั้น html จะถูกเลือก ในบรรดาวิธีการทั้งสามนี้ มีเพียงวิธีนี้เท่านั้นที่เป็นการเขียน CSS ตามกฎหมาย ซึ่งหมายความว่าสามารถผ่านเครื่องมือตรวจสอบความถูกต้องได้ การยืนยันจึงเป็นการใช้แฮ็กที่แนะนำโดยผู้เขียน
Internet Explorer 6 และต่ำกว่า
ใช้ * html {} เพื่อเลือกองค์ประกอบ html
IE 7 และต่ำกว่า
ใช้ *+html, * html {} เพื่อเลือกองค์ประกอบ html
IE7 เท่านั้น
ใช้ *+html {} เพื่อเลือกองค์ประกอบ html
IE 7 และเบราว์เซอร์สมัยใหม่เท่านั้น
ใช้ html>body {} เพื่อเลือกองค์ประกอบ body
เบราว์เซอร์สมัยใหม่เท่านั้น (ไม่ใช่ IE 7)
ใช้ html>/**/body {} เพื่อเลือกองค์ประกอบเนื้อหา
4. IE และ FF มีการตีความโมเดลกล่องที่แตกต่างกัน
แบนด์วิธที่แสดงโดยการทดสอบคือ 650px
ความกว้างทั้งหมดของ IE Box คือผลรวมของความกว้างของความกว้าง+ช่องว่างภายใน+เส้นขอบ+ระยะขอบ ความกว้างรวมของกล่อง FF คือความกว้างของความกว้าง และความกว้างของช่องว่างภายใน+เส้นขอบ+ระยะขอบจะรวมอยู่ในความกว้าง
หากมี BOX{WIDTH:"300"; PADDING:"5PX";} ความกว้างของ BOX ใน IE ควรเป็น: 310 ความกว้างของ FF คือ 300 ดังนั้นเมื่อเติม BOX แล้ว คุณควรใช้ BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";} เพื่อให้แน่ใจว่าความกว้างของ BOX จะเป็น 300px เสมอ และ จะไม่มีปรากฏการณ์ถูกยืดออก และใน FF จะไม่มีสถานการณ์ที่ชั้นลอยไม่เต็ม
5. แท็ก ul มีค่าช่องว่างภายในใน Mozilla แต่มีเพียงระยะขอบเท่านั้นที่มีค่าใน IE
ตั้งค่า ul{margin:0;padding:0}
6. IE ไม่สามารถแยกแยะความแตกต่างระหว่างความสัมพันธ์ทางมรดกและความสัมพันธ์แบบพ่อ-ลูกได้ ทั้งหมดนี้เป็นความสัมพันธ์ทางมรดก
7. การตั้งค่าช่องว่างภายใน div ใน FF จะทำให้ความกว้างและความสูงเพิ่มขึ้น แต่ IE จะไม่เพิ่ม (สามารถแก้ไขได้ด้วย !important)
8. ปัญหาการตั้งศูนย์
1. จัดกึ่งกลางแนวตั้ง ตั้งค่า line-height ให้สูงเท่ากับ div ปัจจุบัน จากนั้นจึงผ่านการจัดแนวแนวตั้ง: ตรงกลาง (ระวังอย่าห่อเนื้อหา)
2. กึ่งกลางแนวนอน: 0 อัตโนมัติ (แน่นอนว่าไม่ใช่สากล)
3. หากคุณต้องการเพิ่มสไตล์ให้กับเนื้อหาในแท็ก คุณต้องตั้งค่า display: block; (ทั่วไปในแท็กการนำทาง)
4. ความแตกต่างในการทำความเข้าใจ BOX ระหว่าง FF และ IE นำไปสู่ความแตกต่าง 2px และปัญหาเช่นระยะขอบของ div ที่ตั้งค่าให้ลอยเป็นสองเท่าภายใต้ IE\
5. การแสดงที่แตกต่างกันของ UL:
แท็ก ul มีรูปแบบรายการและช่องว่างภายในตามค่าเริ่มต้นภายใต้ FF วิธีที่ดีที่สุดคือการประกาศล่วงหน้าเพื่อหลีกเลี่ยงปัญหาที่ไม่จำเป็น (พบได้ทั่วไปในแท็กการนำทางและรายการเนื้อหา)
6. อย่าตั้งค่าความสูงของ div เป็น wrapper ภายนอก วิธีที่ดีที่สุดคือเพิ่ม overflow: ซ่อนไว้ เพื่อให้สามารถปรับความสูงได้
9. สำหรับเคอร์เซอร์มือนั้น ใช้ได้กับ IE เท่านั้น หากทั้ง IE และ FF รู้จักมัน โปรดใช้เคอร์เซอร์: ตัวชี้