CSS Hack兼容各瀏覽器是否正常
CSSHack是在標準CSS沒辦法兼容各瀏覽器顯示效果時才會用上的補救方法，我們在webjx.com中不泛深入介紹CSS兼容性的文章。在各瀏覽器廠商解析CSS沒有達成一致前，我們只能用這樣的方法來完成這樣的任務。
在webjx.com上你可能能搜索到一大堆的CSSHack，但是我今天發布的你可能并不都很了解，因為這些都是只針對單獨一個瀏覽器的CSSHack。為了向你展示這些CSSHack是否正常運作，我新建六個P標簽，并給每一個P標簽一個特有的id。這將向你展示CSSHack的運作情況。
<pid="opera">我來自Opera7.2-9.5</p>
<pid="safari">我是神奇的Safari</p>
<pid="firefox">我來自Firefox</p>
<pid="firefox12">我是你爺爺Firefox1-2</p>
<pid="ie7">我是囧IE7</p>
<pid="ie6">我是腦瘸IE6</p>
然后我讓這些P標簽默認都不顯示
<styletype="text/css">bodyp{display:none;}</style>
使用IECSS條件注釋區分IE瀏覽器
最簡單的區分IE瀏覽器的方法自然是使用他們的條件注釋。微軟創建了一個強大的語法來讓我們去實現這個功能。我不想再詳細地介紹IE條件注釋了，我想你在搜索引擎能搜索到上萬個搜索條目，我這里只要這兩個:
<!--[ifIE7]>
<styletype="text/css">
</style><![endif]-->
<!--[ifIE6]>
<styletype="text/css"></style>
<![endif]-->
使用CSS解析器Hacks區分IE
雖說IE條件注釋十分簡單好用，但是如果你想把全部的CSS放到一個文件里的話，那么你不得不使用別的方法。注意這里的IE7Hack將只對IE7有效，因為IE6根本不知道>選擇符。同時你也得注意>選擇符對于其他瀏覽器同樣是無效的。
html>body#ie7{*display:block;}
body#ie6{_display:block;}
CSSHack區分Firefox
第一個使用了body:empty來區分Firefox1和2。第二個hack使用了全部Firefox瀏覽器的專有擴展-moz。-moz只對Firefox有效，使用這個Hack大可不必擔心其他瀏覽器的影響。
body:empty#firefox12{display:block;}
@-moz-documenturl-prefix(){#firefox{display:block;}}
CSSHack區分Safari
Safari的CSShack與Firefox的hack看起來很像，使用的是Safari瀏覽器的專有擴展-webkit且只對Safari瀏覽器有效。
@mediascreenand(-webkit-min-device-pixel-ratio:0){#safari{display:block;}}
CSSHack區分Opera
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body#opera{display:block;}}
然后，全部合在一起便是
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""https://www.w3.org/TR/html4/strict.dtd">
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>CSSBrowserHacks-webjx.com</title>
<styletype="text/css">
bodyp{
display:none;
}
html:first-child#opera{
display:block;
}
html>body#ie7{
*display:block;
}
body#ie6{
_display:block;
}
body:empty#firefox12{
display:block;
}
@-moz-documenturl-prefix(){
#firefox{
display:block;
}
}
@mediascreenand(-webkit-min-device-pixel-ratio:0){
#safari{
display:block;
}
}
@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){
head~body#opera{
display:block;
}
}
</style>
</head>
<body>
<pid="opera">我來自Opera7.2-9.5</p>
<pid="safari">我是神奇的Safari</p>
<pid="firefox">我來自Firefox</p>
<pid="firefox12">我是你爺爺Firefox1-2</p>
<pid="ie7">我是囧IE7</p>
<pid="ie6">我是腦瘸IE6</p>
</body>
</html>
CSSHack雖好且方便兼容各瀏覽器，但是通不過W3C驗證，所以還得自己權衡是否有必要去使用。
Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |
請先 登入 以發表留言。