您當(dāng)前位置：首頁 > web前端 > htmlcss > CSS 忍者：安全的 CSS hacks 秘籍

CSS 忍者：安全的 CSS hacks 秘籍

來源：程序員人生發(fā)布時間：2014-05-27 09:51:31 閱讀次數(shù)：2714次

你如何搞定 IE 這只難以馴服的怪獸？使用 CSS Hacks 或者條件注釋么？恐怕沒有什么解決方案是完美的。每個設(shè)計師或者前端碼農(nóng)都會有自己打敗 IE 行之有效的方法。所有這些技術(shù)都各有利弊，讓我們一起來看看。

通過條件判斷引入樣式表

使我們能很容易在 IE 瀏覽器中通過條件注釋語句加載指定樣式表，而其他非 IE 內(nèi)核瀏覽器則自動忽略這段蹩腳的 HTML 注釋。下面是一個例子：

<!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]--><!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]--><!--[if IE 6]><link rel="stylesheet" href="ie6.css"><![endif]-->

這段代碼會導(dǎo)致 IE8、IE7、IE6 各自加載對應(yīng)的樣式文件。這事實上是非常牛逼的，條件注釋給按瀏覽器加載各自不同的樣式表提供了可能，但同時需要維護多個樣式文件。

CSS hacks

這事實上是個齷齪的做法，能解決問題又不符合規(guī)范，看著也很頭大。大部分人看著它只能束手無策而又逼不得已。之前的《CSS Hacks for IE，IE 也可以很完美》已經(jīng)談過 IE 的 CSS hacks 了。現(xiàn)在可以來簡單回顧一下常用的幾個方法：

_selector{property:value;} //IE6*selector{property:value;} //IE6 & IE7selector{property:value9;} //IE6 & IE7 & IE8

這個一般人都知道，就不多說了。但面臨的一個現(xiàn)實問題是，9 這個 hack 不只是針對 IE8 以及更老版本奏效，IE9 最終的發(fā)行版依舊會受到這個 hack 的影響。而 IE9 本身在 CSS 上的各種缺陷又是被修復(fù)的。如果將來 IE10、IE11 來了，那又怎么辦？顯然 9 并不是一個嚴(yán)謹(jǐn)?shù)陌踩姆桨浮?/p>

另外，采用不同的 X-UA-Compatible 模式也會影響不同版本的 IE 渲染差異。建議設(shè)置默認(rèn)渲染模式如下：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">//標(biāo)準(zhǔn) IE 模式

那咋整呢？咋整咋整咋整？沒事，下面還有更絕的。

通過條件判斷插入指定類

既然可以用條件判斷，那么直接為不同 IE 版本輸出單獨用于設(shè)定樣式的鉤子類好了。直接上代碼：

<!--[if !IE]><html><![endif]--> // 非 IE 瀏覽器的情況，不添加任何作用類<!--[if IE 6]><html class="ie6"><![endif]--><!--[if IE 7]><html class="ie7"><![endif]--><!--[if IE 8]><html class="ie8"><![endif]-->

如果要是 IE9、IE10 再想出現(xiàn)什么神奇的行為藝術(shù)的話，繼續(xù)添加指定作用類就行咯。并且你的樣式表也會變得異常干凈、整潔、美觀：

.selector { color: black; }.ie8 .selector { color: green; } /* IE8 */.ie7 .selector { color: blue; } /* IE7 */.ie6 .selector { color: red; } /* IE6 */

當(dāng)然，標(biāo)準(zhǔn)模式的 X-UA-Compatible 聲明還是必須的，以防頁面被強制按照低版本的 IE 來渲染。

關(guān)于條件注釋的參考資料：http://msdn.microsoft.com/en-us/library/ms537512.aspx

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈
程序員人生