兼容各種瀏覽器篡位的css樣式寫法分享

2024-07-11 08:47:30

字體：大中小

來源：轉載

供稿：網友

/*針對谷歌瀏覽器內核支持的CSS樣式*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
樣式
}
/*針對IE6特制識別的CSS樣式*/
*HTML .SearchBox
{
樣式
}
針對Firefox瀏覽器的內核CSS寫法：
@-moz-document url-prefix() {
.font1 {color:red}
}
IE8就是自己來調試了。調試一個瀏覽器，有不合適的地方可以在該內核css中重寫對應的方法，只需把不合適的樣式重寫即可實現。*HTML中則例外，需要每重寫一個都要加*HTML單獨處理。
針對樣式名
如果只讓ie6看見用*html .head{color:#000;}
如果只讓ie7看見用*+html .head{color:#000;}
如果只讓ff看見用:root body .head{color:#000;}
如果只讓ff、IE8看見用html>/**/body .head{color:#000;}
如果只是不讓ie6看見用html>body .head{color:#000;} 即對IE 6無效
如果只是不讓ff、IE8看見用*body .head{color:#000;} 即對ff、IE8無效
針對具體屬性
如果只讓ie6看見用_ .head{_color:#000;}
如果只讓ie7看見用+與_結合的方法: .head{+color:#f00;!;_color:#000;}
IE8正式版hack
/9″　例:”margin:0px auto/9;”.這里的”/9″可以區別所有IE8和FireFox.
“*”　IE6、IE7可以識別.IE8、FireFox不能.
“_”　IE6可以識別”_”,IE7、IE8、FireFox不能.
如：
.a {color:#f00; color:#f60/9; +color:#00FF00; _color:#0000FF; }
從左到右分別對應 FF,IE8 IE7 IE6
還有寫css樣式一定要記住順序：
以下為引用的內容：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
順序很重要

上一篇：css 表單上傳文件的“瀏覽”按鈕修改

下一篇：Web頁面中5種超酷的Hover效果分享