閱讀(101.8k) 書簽贊(9) 我要糾錯(cuò)

你想知道的css hack知識(shí)全都幫你整理好了

2023-03-24 10:09 更新

寫 CSS 樣式的時(shí)候，恐怕最頭疼的就是各個(gè)瀏覽器下的兼容性問(wèn)題，即 CSS hack。

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

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

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

css hack

css hack基本概念

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

比如

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

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

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

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

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

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

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

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

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

各瀏覽器下 Hack 的寫法

1、Firefox

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

@-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; } }
上面寫法主要是針對(duì)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以下版本能識(shí)別，這里需要注意此處“9”只能是“9”不能是別的，比如說(shuō)“8”，不然會(huì)失去效果的，如：

.demo {background: lime9;}

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瀏覽器下才能識(shí)別，如：

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

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

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

.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;}
上面具體介紹了各種版本瀏覽器下如何識(shí)別各種的Hack寫法，包括了IE6-9以及現(xiàn)代版本的瀏覽器寫法。綜合上面的所述，我們針對(duì)不同瀏覽器的Hack寫法主要分為兩種從CSS選擇器和CSS屬性上來(lái)區(qū)別不同的Hack寫法。

慎用\0的CSS Hack

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

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

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

.css-hack {

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

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

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

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

}

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

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

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

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

.css-hack {

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

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

}

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

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

因?yàn)?，我們不能夠?jiǎn)單地下結(jié)論說(shuō)，使用 \0 可以實(shí)現(xiàn)對(duì) IE 8、IE 9 甚至 IE 10 +的 CSS Hack。

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

除IE外都可識(shí)別

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

1.大部分特殊字符 IE 瀏覽器支持，其他主流瀏覽器 firefox，chrome，opera，safari不支持 (opera 可識(shí)別除外)。
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 后會(huì)導(dǎo)致 width 和 height 增加, 但 IE 不會(huì).(可用 !important 解決)

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

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

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

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

針對(duì) firefox ie6 ie7 的 css 樣式

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

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

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

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

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

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

CSS 布局中的居中問(wèn)題

主要的樣式定義如下：

body {TEXT-ALIGN: center;}

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

說(shuō)明：

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

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

需要說(shuō)明的是，如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中，建議不要套在一個(gè) DIV 里，你可以依次拆出多個(gè)div，
只要在每個(gè)拆出的 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-}

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

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

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

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

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

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

頁(yè)面的最小寬度

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

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

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

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

清除浮動(dòng)

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

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

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

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

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

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

IE捉迷藏的問(wèn)題

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

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

高度不適應(yīng)

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

例：

實(shí)例

#box {background-color:#eee; }

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

嘗試一下 ?

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

以上內(nèi)容是否對(duì)您有幫助：

← CSS 透明度設(shè)置方法及常見問(wèn)題解析

DIV+CSS布局基本流程及實(shí)例介紹 →

寫筆記

我要補(bǔ)充

你想知道的css hack知識(shí)全都幫你整理好了

css hack基本概念

各瀏覽器下 Hack 的寫法

慎用\0的CSS Hack

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

css hack兼容技巧

實(shí)例

推薦文章

推薦教程

推薦課程