針對Internet Explorer這個老牌瀏覽器,我們需要單獨編寫CSS。因為IE并不支持最新版的CSS規范,而且它也有自己的一些怪癖。所以在編寫CSS時,需要注意以下幾點:
/* 1. 使用IE專屬的hack */ .box { width: 100px; height: 100px; background-color: red; /* IE6下特有的hack */ _background-color: blue; /* IE7下特有的hack */ *background-color: green; } /* 2. 選擇器兼容問題 */ div#box { width: 100px; } /* IE6無法識別ID選擇器,使用標簽選擇器兼容 */ div.box { width: 100px; } /* 3. 盒模型問題 */ .box { width: 100px; padding: 10px; margin: 10px; } /* 在IE6下,盒模型默認為border-box而非content-box */ *{ padding: 0; margin: 0; behavior: url(/css/hacks/boxsizing.htc); /* 引用IE專用的插件以支持W3C盒模型 */ } /* 4. 浮動問題 */ .left { float: left; } .right { float: right; } /* 在IE6下,浮動元素需要加上width: 1%才能清除float */ .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* IE6專屬hack */ * html .clearfix { height: 1%; }
總之,單獨給IE編寫CSS需要細心和耐心,我們需要針對不同版本的IE做兼容性處理,避免出現一些奇怪的bug。