เอฟเฟกต์ใน IE
เอฟเฟกต์ใน Mozilla Firefox
สาเหตุนี้เกิดจากข้อบกพร่องในการตีความระยะห่างระหว่างกล่องของ IE (โปรดดู "ปัญหาเกี่ยวกับโมเดลลอยตัว" ของ onestab) ฉันไม่เคยแก้ไขปัญหานี้จนกว่าฉันจะแปล "Table vs. CSS--Battle of Life and Death" เคล็ดลับจากผู้เขียนช่วยให้ฉันค้นหาวิธีแก้ไข: ใช้ !สำคัญ
!important เป็นไวยากรณ์ที่กำหนดไว้ใน CSS1 หน้าที่ของมันคือการเพิ่มลำดับความสำคัญของแอปพลิเคชันของกฎสไตล์ที่ระบุ (ดู: คำอธิบาย W3.org) รูปแบบไวยากรณ์ { sRule!important } ถูกเขียนไว้ที่ส่วนท้ายของคำจำกัดความ ตัวอย่างเช่น:
กล่อง{สี:สีแดง !สำคัญ;}
จุดที่สำคัญที่สุดคือ: IE ไม่เคยสนับสนุนไวยากรณ์นี้ แต่เบราว์เซอร์อื่นสนับสนุน ดังนั้นเราจึงสามารถใช้สิ่งนี้เพื่อกำหนดสไตล์ที่แตกต่างกันสำหรับ IE และเบราว์เซอร์อื่น ๆ ตัวอย่างเช่น เรากำหนดสไตล์ดังนี้:
.colortest {
ขอบ:20px solid #60A179 !สำคัญ;
เส้นขอบ:20px ทึบ #00F;
ช่องว่างภายใน: 30px;
ความกว้าง: 300px;
-
เมื่อเรียกดูใน Mozilla คุณสามารถเข้าใจลำดับความสำคัญของ !important ได้ ดังนั้นสี #60A179 จะปรากฏขึ้น:
เมื่อเรียกดูใน IE จะไม่เข้าใจลำดับความสำคัญของ !important ดังนั้นสี #00F จะปรากฏขึ้น:
อย่างที่คุณเห็น การใช้ !important เราสามารถกำหนดสไตล์ที่แตกต่างกันสำหรับเบราว์เซอร์ IE และที่ไม่ใช่ IE เพียงเพิ่ม !important หลังสไตล์เบราว์เซอร์ที่ไม่ใช่ IE ดังนั้น ความแตกต่างของการแสดงผล 2px บนหน้าแรกของฉันที่กล่าวถึงข้างต้นจึงสามารถแก้ไขได้อย่างง่ายดาย:
PADDING-TOP: 11px !สำคัญ;
ช่องว่างด้านบน: 9px;
!important จะกลายเป็นเครื่องมืออันทรงพลังสำหรับเลย์เอาต์ CSS อย่างแน่นอน โปรดจำไว้และเชี่ยวชาญ :)
