區分各瀏覽器的CSS hack(包括360、搜狗、opera)

呂大豹發表於2013-07-14
瀏覽器CSS

    雖然說使用css hack來解決頁面相容性bug並不是個好辦法，但是有時候這些hack還是用的著的，比如你接受了一個二手或是三手的遺留介面，雜亂無章的css程式碼，只在某個瀏覽器下有相容bug，而且需要短時間內處理。

    下面一段程式碼可以讓你很快利用css來為特定的瀏覽器指定樣式。不多贅述，看碼即懂：

屬性過濾：
_height:10px; /* IE6支援 */
*height:10px; /* IE6、IE7支援 */
height:10px\0/; /* IE8支援 */


選擇器過濾：

/*針對IE6*/
* html #nav{  margin:12px;  }


/*針對IE7*/
*+html #nav{  margin:11px; }



/*針對Firefox*/
@-moz-document url-prefix() {
    #nav{ width:200px; }
}
IE7、Firefox共用
height: 100px !important（優先順序）


/*針對Safari & Chrome* 360 搜狗/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #nav{ width:300px; }
}


/*針對Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #nav{ width:400px; }
}

 

相關文章