CSS hack 初學小結

來源:互聯網
上載者:User
什麼是瀏覽器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 */}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.