hack,顧名思義黑客。不過我在這里說的當然不是這個意思啦~那么什么是css hack呢?
以下引自百度文庫的定義
簡單地講,css hack指各版本及各品牌瀏覽器之間對CSS解釋后出現網頁內容的誤差(比如我們常說錯位)的處理。由于各瀏覽器的內核不同,所以會造成一些誤差就像JS一樣,一個JS網頁特效,在微軟IE6、IE7、IE8瀏覽器有效果,但可能在火狐(Mozilla Firefox)谷歌瀏覽器無效,這樣就叫做JS hack ,所以我們對于CSS來說他們來解決各瀏覽器對CSS解釋不同所采取的區別不同瀏覽器制作不同的CSS樣式的設置來解決這些問題就叫作CSS Hack。
總的來說就是因為不同瀏覽器和版本對樣式解析出現差異導致制作網頁的時候明顯不一樣,嚴重的會整個頁面錯位哦!!
css hack 是通過在css樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什么樣的瀏覽器識別什么樣的符號是有標準的,css hack就是讓你記住這個標準),以達到應用不同的css樣式的目的。
下面是兼容各大主流瀏覽器的css hack匯總(最全的):
.element{
color:#000; /*w3c標準*/
[;color:#f00;]; /*Webkit(chrome和safari)*/
color:#666\9; /*IE8*/
*color:#999; /*IE7*/
_color:#333; /*IE6*/
}
:root .element{color:#0f0\9;} /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}} /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/
建議:在實際開發中如果不是很清楚可以先寫布局代碼,寫一個階段再用瀏覽器測試工具(推薦IETEST)測試哥哥版本瀏覽器的布局效果,如有問題再針對問題單獨調試解決