Web前端技術研究：Css hack技術---使人沮喪的技術

時間 2019-11-12

標籤 web 前端技術研究 css hack 使人沮喪欄目 HTML 简体版

原文原文鏈接

　　我最近想好好整理下csshack技術，可是結果很沮喪，下面我將我最初寫的筆記和你們分享下。css

　　我在單位整理的研究筆記：html

　　不一樣的瀏覽器對某些CSS代碼解析會存在必定的差別，所以就會致使不一樣瀏覽器下給用戶展現的頁面效果不同，碰到這樣的狀況就須要開發人員經過針對不一樣的瀏覽器對應寫出不一樣的CSS代碼，從而達到兼容不一樣瀏覽器的目的，不會讓頁面由於瀏覽器的不一樣而產生有差別的顯示，這種技術有個專門的名稱就是CSS Hack。前端

　　在中國，這種差別主要是體如今主流瀏覽器上，咱們只要解決了主流瀏覽器之間的CSS差別就能夠了。目前流行的主流瀏覽器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文裏對應簡稱爲IE（後面若是添加數字，數字表明版本號，例如IE8），CH,FF,SA和OP。chrome

　　CSS Hack原理是經過不一樣瀏覽器自身所帶有的特別標識符以及CSS中優先級的機制來實現不一樣瀏覽器裏CSS樣式兼容性的問題。編程

　　CSS Hack有三種實現方式，它們分別是：CSS類內部的Hack、CSS選擇器的Hack和HTML頭部的Hack。瀏覽器

　　CSS類內部的Hack：是指CSS屬性或屬性值里加上只有某個瀏覽器本身能夠識別的特殊字符串。例如IE6和IE7都會識別在CSS裏屬性名稱前加上「*」號的屬性，可是firefox卻沒法識別帶「*」號的屬性，所以下面的代碼：前端工程師

body{
background:green; /* firefox下的顯示 */
*background:red; /* IE6和IE7下的顯示 */
}

　　CSS選擇器的Hack：它是指在CSS選擇器前面加上只有某種瀏覽器本身能夠識別的特殊字符串。例如：IE6能識別*html .class{}，IE7能識別*+html .class{}。less

　　HTML頭部的Hack：這種方式主要是針對IE瀏覽器，IE瀏覽器是廣大Web前端工程師的痛，它不只有不少本身獨有的區別於其餘瀏覽器的CSS樣式，本身不一樣版本之間的CSS實現也會存在很大的差別。下面咱們來看看這種方式的寫法：ssh

<!--[if lte IE 8]> <!-- IE條件註釋--> 
<link src="iecss.css" rel="stylesheet" /> 
<![endif]-->

　　這種寫法會被非IE的瀏覽器所忽略，只有IE瀏覽器纔會執行上面的代碼，上面這段代碼的意思是當IE的版本是8或者比8低的IE瀏覽器纔會執行下面的樣式。例子中有一個運算符號lte，它是less than or equal to的簡寫，意思是小於等於，其餘的運算符號還有lt（less than，小於）、gte（greater than or equal to，大於等於）、gt（greater than，大於）。測試

　　下面咱們來看一段代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技術</title>
</head>
<style type="text/css">
div{
    width:400px;
    height:120px;
    margin-bottom:20px;
    border-style:solid;
    border-width:1px;    
}
div.d01{
    background:red;/* FF */
    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}
</style>
<body>
<div class="d01"></div>
</body>
</html>

　　運行這個頁面，firefox顯示的顏色是red，opera爲blue，ie6爲yellow，ie7爲green，ie8以上的版本是turquoise，chrome和safari爲blcak。這個CSS Hack是我平時經常使用的一套模式。這裏要說明下，ie8以上包括ie8的CSS樣式差別性較少，而chrome和safari之間的CSS樣式差別較小，所以這裏我並無爲它們單獨進行hack。

　　若是咱們把上面代碼裏的div.d01的內容順序調整下，例以下面這樣：

    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
    background:red;/* FF */

　　咱們會發現不一樣瀏覽器顯示的效果就會發生變化。ie8以上的版本以及opera顯示正常，可是chrome，safari，ie6，ie7顯示的是紅色，而firefox則沒有任何顏色。引發這個問題的緣由是CSS優先級的問題，例如background:turquoise\9;這種寫法不會致使高版本的ie在顯示上產生誤差，是由於高版本的ie會優先使用這個樣式，對於同級別的CSS樣式，最後面的樣式會覆蓋前面的樣式，例如咱們在ie6和ie7下看到的狀況，此外，若是正確的樣式前面的樣式寫法致使瀏覽器沒法正常解析，那麼就會致使整個CSS樣式加載的失敗，例如firefox。

　　所以編寫CSS Hack時候，對於屬性排列的順序是特別注意的。

　　CSS Hack是一個總結性和經驗性很強的技術，它不像不少編程技術那樣須要咱們去反覆理解一些邏輯上的關係，而是須要咱們平時多留心，多實踐。接下來我將會列舉不一樣瀏覽器之間的CSS Hack技術，你們能夠根據本身實際的狀況選擇應用。

　　對於ie，咱們這邊主要考慮ie6，ie7，ie8，ie9，這四種版本的ie是目前中國市場上最流行的ie版本，雖然ie10已經出來，可是ie10如今使用的用戶相對較少，這邊不會做爲重點講解。

　　對於CSS類內部的Hack ，ie6有本身專有的判斷標識「_」,其餘的瀏覽器都不會識別」_」,ie6也支持」*」，可是「*」也被ie7識別，所以當咱們只想區別ie6和ie7的時候，能夠按下面的代碼書寫：

div.d02{
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}

　　上面的寫法既能夠區分ie6和ie7，可是若是咱們顛倒其位置，那麼不論是ie6仍是ie7都會顯示green顏色。」*」和「_」是ie6和ie7專屬的，其餘版本的瀏覽器都不支持該標記。

　　ie6和ie7除了上面兩個專屬標記，IE6還能識別能識別*html selector{}，IE7還能能識別*+html . selector {}，你們看下面這段代碼：

*html div.d03{
    background:yellow;/* IE6 */
}
*+html div.d03{
    background:green;/* IE7 */
}

　　這兩種寫法是等價的。IE6的*html selector {}和IE7的*+html . selector {}也都是專有標記，別的瀏覽器都不會識別的。

　　還有個頗有趣的標記，就是!important，在網上不少資料說該標記IE6不支持，IE7和firefox支持，爲了驗證網上說法本人寫了下面的樣式：

div.d04{
    background:red !important;    
}

　　我使用的瀏覽器配置以下：

　　支持IE7，IE8，IE9；IE6經過ietester實現；firefox版本是23.0.1；chrome的版本是27.0.1453.116 m；opera的版本是12.12，運行上面的樣式實際的效果是：

　　IE6，IE7，chrome，safari顯示爲紅色，而其餘瀏覽器都沒有顯示任何顏色。

　　這樣說明隨着瀏覽器的不斷升級，csshack技術也是發生變化的，在使用一些現成的css hack代碼時候，若是當不到預期效果是很正常，這時就須要咱們細心的測試，找出最好的解決方案。

　　以上的文字都是我在單位電腦上進行開發寫出來，我家裏的筆記本重裝了操做系統，全部的瀏覽器都進行了重裝，如今都是最新的版本，當我把下面的代碼再執行下時候：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技術</title>
</head>
<style type="text/css">
div{
    width:400px;
    height:120px;
    margin-bottom:20px;
    border-style:solid;
    border-width:1px;    
}
div.d01{
    background:red;/* FF */
    background:blue\0;/* OP */
    background:turquoise\9;/* IE8+ */
    [background:red;background:black;/* SA,CH */ 
    *background:green; /* IE7 */
    _background:yellow;/* IE6 */
}
</style>
<body>
<div class="d01"></div>
</body>
</html>