在編寫CSS時,我們經常會遇到一個問題:不同瀏覽器對CSS的支持程度不同,導致我們的頁面在不同瀏覽器下顯示效果不一致。
其中,IE瀏覽器是我們最需要考慮兼容性的瀏覽器之一。在IE 6-8版本中,有很多CSS屬性和規則并不被支持,如果我們在編寫CSS時沒有注意這些問題,就會影響頁面的使用體驗。
以下是一些針對IE的CSS寫法技巧:
/* 針對IE6的Hacks寫法 */ * html selector {property:value;} /* 針對IE6寬度Bug的Hack寫法 */ .selector {height:200px; w\idth:200px;} /* 針對IE6 Bug的Hack寫法 */ .selector {height:200px; w_methodsidth:200px;_width:198px;} /* 針對IE6 Hack的圖片背景寫法 */ .selector {background-image:url(image.gif); background-position:left top; _background-position:left bottom;} /* 針對IE6的透明度Hack寫法 */ .selector {filter:alpha(opacity=60);} /* 針對IE7的Hack寫法 */ *+html selector {property:value;} /* 針對IE7的min-height Hack寫法 */ .selector {min-height:200px; height:auto !important; height:200px;} /* 針對IE8的Hack寫法 */ .selector {display:-ms-inline-block;}
需要注意的是,這些Hack寫法都是以犧牲W3C標準為代價的,建議在使用時慎重考慮。如果可以選擇盡量避免使用Hack,并使用組合選擇器、特定前綴等方式進行樣式編寫。