CSS hack 初學小結

什麼是瀏覽器HACK：當我們使用不同的瀏覽器（Firefox，IE7， IE6， IE 8, Safari, Opera, chrome）訪問同一個網站，或者頁面的時候，會出現一些不相容的問題，有的顯示出來正常，有的顯示出來不正常，我們在編寫CSS的時候會很惱火，剛修複了這個瀏覽器的問題，結果另外一個瀏覽器卻出了新問題。而HACK就是一種辦法，能讓你在一個CSS裡面獨立的寫支援不同瀏覽器的樣式。這下就和諧了。呵呵！第一個HACK，IE FF 所有瀏覽器 公用（其實也不算是HACK）height:100px;第二個HACK IE6專用_height:100px;第三個HACK IE6 IE7公用*height:100px;介紹完了這三個HACK了，下面我們再來看看如何在一個樣式裡分別給一個屬性定義IE6 IE7 FF專用的HACK，看下面的代碼，順序不能錯哦：程式碼height:100px;*height:120px;_height:150px;下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性：在FF下，第2、3個屬性FF不認識，所以它讀的是 height:100px;在IE7下，第三個屬性IE7不認識，所以它讀第1、2個屬性，又因為第二個屬性覆蓋了第一個屬性，所以IE7最終讀出的是第2個屬性 *height:120px;在IE6下，三個屬性IE6都認識，所以三個屬性都可以讀取，又因為第三個屬性覆蓋掉前2個屬性，所以IE6最終讀取的是第三個屬性。 CSS Hack 的內建與外置寫法外置：.main{ float:left;#float:none;_float:none;html*.main{ float:left;#float:none;_float:none; }*+html .main{ float:left;#float:none;_float:none; } * html .main{ float:left;#float:none;_float:none; }    * 第1行給Firefox以及其他瀏覽器看    * 第2行給safari/IE6/iE7看，如果safari/IE6/iE7 視覺效果不統一，就要在後面跟IE6/IE7的定義    * 第3行給IE7看    * 第4行給IE6以及更老的版本看內建：.main{ float:left;#float:none;_float:none;[float:none;]float:none; }    * 第1個float給Firefox以及其他瀏覽器看    * 第2個加#的float給IE7看    * 第3個加_的float給IE6以及更老的版本看    * 第4個加[的float給safari看    * 第5個加]的float給IE看 僅 Safari 和 Opera 識別的 Hack@media all and (min-width: 0px){/* Safari and Opera  rules here */}或者@media screen and (-webkit-min-device-pixel-ratio:0){/* Safari and Opera rules here */}註：這裡所指代的 Safari 和 Opera 一般為最新版本。 僅 Firefox 3 和 IE7 識別的 Hackselector, x:-moz-any-link, x:default{/* Firefox 3  and IE7 rules here */}使用方法例：在@media screen and (-webkit-min-device-pixel-ratio:0){.box{width:100px;}/* Safari and Opera rules here */}