你想知道的css hack知識全都幫你整理好了

2023-03-24 10:09 更新

寫 CSS 樣式的時候，恐怕最頭疼的就是各個瀏覽器下的兼容性問題，即 CSS hack。

不同的瀏覽器對 CSS 的解析結(jié)果是不同的，因此會導(dǎo)致相同的 CSS 輸出的頁面效果不同，這就需要 CSS hack來解決瀏覽器局部的兼容性問題。

使用 CSS hack會導(dǎo)致部分CSS 代碼在某些瀏覽器中無效，因此可以利用條件樣式，在符合條件的瀏覽器中使用特定的 CSS 代碼覆蓋原來的 CSS 代碼。

CSS hack不僅可以解決瀏覽器兼容性問題，還可以讓我們針對不同版本的瀏覽器編寫定制化的CSS效果。

css hack

css hack基本概念

CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什么樣的瀏覽器識別什么樣的符號是有標(biāo)準(zhǔn)的，CSS hack 就是讓你記住這個標(biāo)準(zhǔn)），以達(dá)到應(yīng)用不同的 CSS 樣式的目的。

比如 

.kwstu{
    width:300px;
    _width:200px;
}

一般瀏覽器會先給元素使用 ?width:300px; ?的樣式，緊接著后面還有個?_width:200px; ?由于下劃線 ?_width? 只有 IE6 可以識別，所以此樣式在 IE6 中實際設(shè)置對象的寬度為200px，后面的把前面的給覆蓋了，而其他瀏覽器不識別? _width ?不會執(zhí)行 ?_width:200px;? 這句樣式，所以在其他瀏覽器中設(shè)置對象的寬度就是 300px;


簡單地講， CSS hack 指各版本及各品牌瀏覽器之間對 CSS 解釋后出現(xiàn)網(wǎng)頁內(nèi)容的誤差(比如我們常說錯位)的處理。由于各瀏覽器的內(nèi)核不同，所以會造成一些誤差。就像 JS 一樣，一個 JS 網(wǎng)頁特效，在微軟 IE6、IE7、IE8 瀏覽器有效果，但可能在火狐（Mozilla Firefox）或者谷歌瀏覽器無效，這種操作就叫做 JS hack 。對于 CSS 來說，解決各瀏覽器對 CSS 解釋不同所采取的區(qū)別不同瀏覽器制作不同的 CSS 樣式的設(shè)置來解決這些問題就叫作 CSS Hack。


CSS Hack常見的有三種形式：CSS 屬性 Hack、CSS 選擇符 Hack 以及 IE 條件注釋 Hack， Hack 主要針對IE 瀏覽器。

1、屬性級 Hack：比如 IE6 能識別下劃線_和星號 * ，IE7 能識別星號 * ，但不能識別下劃線_，而 firefox 兩個都不能認(rèn)識。

2、選擇符級 Hack：比如 IE6 能識別 *html .class{}，IE7能識別 *+html .class{} 或者 *:first-child+html .class{}。

3、IE 條件注釋 Hack：IE條件注釋是微軟從 IE5 開始就提供的一種非標(biāo)準(zhǔn)邏輯語句。比如針對所有IE：<!–[if IE]><!–您的代碼–><![endif]–>，針對 IE6 及以下版本：<!–[if lt IE 7]><!–您的代碼–><![endif]–>，這類 Hack 不僅對 CSS 生效，對寫在判斷語句里面的所有代碼都會生效。


PS：條件注釋只有在 IE 瀏覽器下才能執(zhí)行，這個代碼在非 IE 瀏覽下被當(dāng)做注釋視而不見。可以通過IE條件注釋載入不同的 CSS、JS、HTML 和服務(wù)器代碼等。

提示：有個 CSS hack 三種常見形式的更多解釋，你可以查閱《CSS3學(xué)習(xí)筆記》的“CSS hack合集”部分的內(nèi)容。

各瀏覽器下 Hack 的寫法

1、Firefox
@-moz-document url-prefix() { .selector { property: value; } }
//上面是僅僅被Firefox瀏覽器識別的寫法，具體如：

@-moz-document url-prefix() { .demo { color:lime; } }
//支持Firefox的還有幾種寫法：

/* 支持所有firefox版本 */ 
#selector[id=selector] { property: value; } 
或者： 
@-moz-document url-prefix() { .selector { property: value; } } 
/* 支持所有Gecko內(nèi)核的瀏覽器 (包括Firefox) */ 
*>.selector { property: value; }

2、Webkit 內(nèi)核核瀏覽器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
上面寫法主要是針對Webkit內(nèi)核的瀏覽器，如Google Chrome 和 Safari瀏覽器：

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

3、Opera 瀏覽器

html:first-child>body Selector {property:value;} 或者： @media all and (min-width:0) { Selector {property: value;} } 或者： @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }

上面則是Opera瀏覽器的Hack寫法：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }

4、IE9瀏覽器

:root Selector {property: value9;}
上面是IE9的寫法，具體應(yīng)用如下：

:root .demo {color: #ff09;}

5、IE9以及IE9以下版本

Selector {property:value9;}
這種寫法只有IE9以及IE9以下版本能識別，這里需要注意此處“9”只能是“9”不能是別的，比如說“8”，不然會失去效果的，如：

.demo {background: lime9;}

css hack 區(qū)分

6、IE8瀏覽器

@media \0screen{

Selector {property: value;}     }


7、IE8以及IE8以上的版本

Selector {property: value\0;}
這種寫法只有IE8以及IE8以上版本支持，如

.demo {color: #ff0;}

8、IE7瀏覽器

*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
上面兩種是IE7瀏覽器下才能識別，如：

*+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}

9、IE7及IE7以下版本瀏覽器

Selector {*property: value;}
上面的寫法在IE7以及其以下版本都可以識別，如：

.demo {*background: red;}


10、IE6瀏覽器

Selector {_property/**/:/**/value;} 或者： Selector {_property: value;} 或者： *html Selector {property: value;}
具體應(yīng)用如下：

.demo {_width/**/:/**/100px;} 或者： .demo {_width: 100px;} 或者： *html .demo {width: 100px;}
上面具體介紹了各種版本瀏覽器下如何識別各種的Hack寫法，包括了IE6-9以及現(xiàn)代版本的瀏覽器寫法。綜合上面的所述，我們針對不同瀏覽器的Hack寫法主要分為兩種從CSS選擇器和CSS屬性上來區(qū)別不同的Hack寫法。


慎用\0的CSS Hack

在 Web 頁面制作中盡量不要使用 CSS Hack 來處理兼容問題。因為任何瀏覽器下出現(xiàn)渲染不一致都極有可能是我們自己的結(jié)構(gòu)或樣式不符合 W3C 的某些要求，或者說違背了瀏覽器的某些規(guī)則而造成的，所以我們應(yīng)該盡量通過結(jié)構(gòu)或 CSS 的修改來達(dá)到各瀏覽器渲染一致效果，除非到了萬不得已情況下，才考慮CSS的Hack。

網(wǎng)上許多與 CSS Hack 相關(guān)的文章中說，在 CSs 的屬性值和分號之間添加字符 \0，可以實現(xiàn)對 IE 8 或  IE 9的 CSS hack (有的說，僅支持 IE8)。

網(wǎng)上的示例是這樣的：

.css-hack {

    color: red; /* 其他瀏覽器顯示紅色 */

    color: blue\0; /* IE8、IE9 顯示藍(lán)色 */

    +color: green; /* IE7 顯示綠色 */

    _color: brown; /* IE6 顯示棕色 */

}

通過實際測試發(fā)現(xiàn)，關(guān)于使用字符 \0 實現(xiàn)的上述 CSS Hack 有3點需要注意。

1、IE10 也能夠識別添加了字符 \0 的 CSS 屬性值(筆者這里沒有 IE 11，不知道 IE 11 是否也能識別)。

2、屬性值和 \0 之間不能有空格，有一個空格的話(例如：blue \0)，在 IE 8 中就失效了，僅對 IE 9/IE 10有效。

3、如果我們只想對 IE 8/IE 9進(jìn)行CSS Hack 呢？這個時候，我們?nèi)サ艉竺鎯尚信c IE6、IE7 有關(guān)的代碼。

.css-hack {

    color: red; /* 其他瀏覽器顯示紅色 */

    color: blue\0; /* IE8、IE9 顯示藍(lán)色 */

}

這個時候，在 IE 6、IE 7 瀏覽器中，你會發(fā)現(xiàn)你看到的不是紅色，而是黑色(也就是默認(rèn)的字體顏色)！

這是因為一般瀏覽器的思路是，先過濾掉無效的css屬性值，然后再從正確的屬性設(shè)置中根據(jù)優(yōu)先級獲取最后面的css屬性值。而 IE 6/7 瀏覽器不是先過濾掉無效的屬性值，而是先根據(jù)優(yōu)先級，獲取最后面的 CSS 屬性值，然后再來判斷該屬性值是否，無效就忽略掉。因此，如果按照網(wǎng)上所說，僅僅使用 \0 來實現(xiàn) IE 8+ 的 CSS Hack，則會對 IE6/7 中的顯示效果造成破壞。你必須通過額外的css屬性設(shè)置來復(fù)原IE6/7的樣式。

因為，我們不能夠簡單地下結(jié)論說，使用 \0 可以實現(xiàn)對 IE 8、IE 9 甚至 IE 10 +的 CSS Hack。

瀏覽器識別字符標(biāo)準(zhǔn)對應(yīng)表

<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->

<!--[if IE]> 所有的IE可識別 <![endif]-->

<!--[if IE 6]> 僅IE6可識別 <![endif]-->

<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->

<!--[if IE 7]> 僅IE7可識別 <![endif]-->

<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->

<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->

<!--[if IE 8]> 僅IE8可識別 <![endif]-->

<!--[if IE 9]> 僅IE9可識別 <![endif]-->

從上表可以分析出以下幾種情況：

1.大部分特殊字符 IE 瀏覽器支持，其他主流瀏覽器 firefox，chrome，opera，safari不支持 (opera 可識別除外)。
2. \9    ：所有 IE 瀏覽器都支持
3. _和-  ：僅 IE6 支持
4. *     ：IE6、E7 支持
5. \0    ：IE8、IE9 支持，opera 部分支持
6. \9\0  ：IE8 部分支持、IE9 支持
7. \0\9  ：IE8、IE9 支持

css hack兼容技巧

1, FF下給 div 設(shè)置 padding 后會導(dǎo)致 width 和 height 增加, 但 IE 不會.(可用 !important 解決)

2, 居中問題
①.垂直居中.將 line-height 設(shè)置為 當(dāng)前 div 相同的高度, 再通過 vertical-align: middle.( 注意內(nèi)容不要換行.)
②.水平居中. margin: 0 auto;(當(dāng)然不是萬能)

3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標(biāo)簽)

4, FF 和 IE 對 BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題

5, ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)

6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng)

7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 IE


針對 firefox ie6 ie7 的 css 樣式
現(xiàn)在大部分都是用 !important 來 hack，對于 ie6 和 firefox 測試可以正常顯示，但是 ie7 對 !important 可以正確解釋，會導(dǎo)致頁面沒按要求顯示！找到一個針對 IE7 不錯的 hack 方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒有問題了。

現(xiàn)在寫一個CSS可以這樣：

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在 firefox 下字體顏色顯示為#333，IE6 下字體顏色顯示為 #666，IE7 下字體顏色顯示為#999。


CSS 布局中的居中問題


主要的樣式定義如下：

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

說明：


首先在父級元素定義 text-align: center; 這個的意思就是在父級元素內(nèi)的內(nèi)容居中；對于 IE 這樣設(shè)定就已經(jīng)可以了。


但在 mozilla 中不能居中。解決辦法就是在子元素定義時候設(shè)定時再加上margin-right: auto;margin-left: auto;


需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個 DIV 里，你可以依次拆出多個div，
只要在每個拆出的 div 里定義 margin-right: auto;margin-left: auto; 就可以了。


盒模型不同解釋

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

浮動 IE 產(chǎn)生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產(chǎn)生200px的距離 display:inline; //使浮動忽略}

這里細(xì)說一下 block,inline 兩個元素,Block 元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);


#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實現(xiàn)同一行排列的的效果 diplay:table;



IE 不認(rèn)得 min-這個定義，但實際上它把正常的 width 和 height 當(dāng)作有 min 的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用 min-width 和 min-height 的話，IE下面根本等于沒有設(shè)置寬度和高度。比如要設(shè)置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：


#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}


css

頁面的最小寬度


min-width 是個非常方便的 CSS 命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但 IE 不認(rèn)得這個，而它實際上把 width 當(dāng)做最小寬度來使。為了讓這一命令在 IE 上也能用，可以把一個<div> 放到 <body> 標(biāo)簽下，然后為 div 指定一個類：


然后 CSS 這樣設(shè)計：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}

第一個min-width是正常的；但第2行的 width 使用了 JavaScript，這只有IE才認(rèn)得，這也會讓你的 HTML 文檔不太正規(guī)。它實際上通過 Javascript 的判斷來實現(xiàn)最小寬度。


清除浮動

.hackbox{ display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;}

或者加入 :after（偽對象）,設(shè)置在對象后發(fā)生的內(nèi)容，通常和 content 配合使用，IE 不支持此偽對象，非 IE 瀏覽器支持，

所以并不影響到 IE/WIN 瀏覽器。這種的最麻煩的……

#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}


屬性選擇器(這個不能算是兼容,是隱藏 CSS 的一個bug)


p[id]{}div[id]{}
這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的。


IE捉迷藏的問題


當(dāng)div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。


解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。


高度不適應(yīng)


高度不適應(yīng)是當(dāng)內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對象使用
margin 或 padding 時。

例：

實例

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }


嘗試一下 ?

解決方法：在 P 對象上下各加 2個空的 div 對象 CSS 代碼：.1{height:0px;overflow:hidden;}或者為 DIV 加上 border 屬性。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號