什么是 CSS hack
CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什么樣的瀏覽器識別什么樣的符號是有標準的,CSS hack就是讓你記住這個標準),以達到應用不同的CSS樣式的目的,
比如.kwstu{width:300px;_width:200px;},一般瀏覽器會先給元素使用width:300px;的樣式,緊接著后面還有個_width:200px;由于下劃線_width只有IE6可以識別,所以此樣式在IE6中實際設置對象的寬度為200px,后面的把前面的給覆蓋了,而其他瀏覽器不識別_width不會執行_width:200px;這句樣式,所以在其他瀏覽器中設置對象的寬度就是300px;
CSS hack由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7,對CSS的解析認識不完全一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說,CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然,我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
注意: 我們通常主要考慮的瀏覽器有IE6、IE7、IE8、谷歌瀏覽器(chrome)、火狐(Mozilla Firefox)即可,至于我們常用的傲游、QQ的TT瀏覽器是用你計算機中裝的系統自帶瀏覽器的內核,所以只需要兼容以上瀏覽器即可兼容TT傲游瀏覽器。
CSS hack用來解決有些css屬性在不同瀏覽器中顯示的效果不一樣的問題。
CSS Hack一般都是利用各瀏覽器的支持CSS的能力和BUG來進行的。
所以對瀏覽器的選擇大致可以分為能力選擇和怪癖選擇(BUG)。
能力通常是指瀏覽器對CSS特性的支持程度,
而怪癖是指瀏覽器特有的一些BUG。
友情提示:盡量找到通用方法而減少對CSS Hack的使用,大規模使用CSS Hack會帶來維護成本的提高以及瀏覽器版本變化而帶來類似Hack失效等系列問題。
CSS Hack常見的有三種形式:
CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack,
Hack主要針對IE瀏覽器。
1、屬性級Hack:比如IE6能識別下劃線“”和星號“”,
IE7能識別星號“”,但不能識別下劃線””,
而firefox兩個都不能認識。
2、選擇符級Hack:比如IE6能識別html .class{}
,IE7能識別+html .class{}
或者*:first-child+html .class{}
3、IE條件注釋Hack:IE條件注釋是微軟IE5開始就提供的一種非標準邏輯語句。
,這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效。
PS:條件注釋只有在IE瀏覽器下才能執行,這個代碼在非IE瀏覽下被當做注釋視而不見。
可以通過IE條件注釋載入不同的CSS、JS、HTML和服務器代碼等。
談一談瀏覽器兼容的思路
(1) 要不要兼容 ? 從受眾和產品角度考慮
(2)如果要兼容,是兼容到什么程度,
哪些瀏覽器兼容哪些效果?
(3)如何做?
根據兼容需求選擇技術框架或庫(JQuery)
根據兼容需求選擇兼容工具:
html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss
條件注釋、CSS Hack、js 能力檢測做一些修補
優雅降級或 漸進增強
列舉5種以上瀏覽器兼容的寫法
注意書寫順序
CSS屬性前綴法
.topbar{
background: red; /firefox/
background: blue; / ie6 7/
_background: green; / ie6識別*/
}
選擇器前綴法
.class{} / ie6*/
+.class{} /ie7*/
IE條件注釋 ,ie瀏覽器能識別