CSS 相容瀏覽器的方法 CSS Hack

阿新 • • 發佈：2019-02-15

開發人員基本都知道，CSS的開發本身並不難，但是，當在不同的瀏覽器下測試程式碼時，困難就出現了。瀏覽器的 bug 和不一致的顯示方式，是大多數CSS開發人員面臨的主要難題，你的設計在一種瀏覽器上看起來很好，而在另一種瀏覽器上可能會支離破碎。

實踐證明，CSS的相容性主要有兩種情況：一種是對老版本IE的相容性，一種是使用CSS3新特性後產生的相容性。

對老版本IE的相容性，主要通過CSS Hack和客戶端指令碼來解決；對使用CSS3新特性後產生的相容性，主要通過瀏覽器私有字首來解決。

CSS Hack

由於不同廠商的瀏覽器（如IE、Chrome、Firefox、Safari），或同一瀏覽器的不同版本（如IE6~IE11），對CSS的解析不完全一樣，導致同一頁面在不同瀏覽器中的效果可能不一致。

為了得到統一的效果，就需要針對不同瀏覽器，或同一瀏覽器的不同版本，編寫不同的CSS，把這個過程就被稱作CSS Hack。

實踐證明，CSS Hack主要用來解決IE的相容性問題。雖然它是強有力的工具，但應該謹慎使用，它一般作為修復問題的最後一道屏障，在不得已的時候才會使用。因為更重要的是跟蹤、隔離和識別問題，而不是修復問題。只有真正瞭解問題背後的原理，才能找到最好的解決方案。

CSS Hack 有 3 種表現形式：

1）屬性字首或字尾法

即在定義樣式規則時，為樣式屬性新增只有特定瀏覽器，或某瀏覽器特定版本才能識別的字首或字尾。

表 10-1 常見的字首字尾說明及應用示例
字首/字尾	適用版本	應用示例
_	IE6	p { _color: blue; }
-	IE6	p { -color: blue; }
+	IE7	p { +color: blue; }
*	IE6/IE7	p { *color: blue; }
#	IE6/IE7/IE8	p { #color: blue; }
!important	IE7/IE8/IE9/IE10/IE11	p { color: blue !important; }
\9	IE6/IE7/IE8/IE9/IE10/IE11	p { color: blue\9; }
\0	IE8/IE9/IE10/IE11	p { color: blue\0; }
\9\0	IE9/IE10/IE11	p { color: blue\9\0; }

在使用屬性字首或字尾法時，一般是將適用範圍廣、被識別能力強的寫法寫在前面，把特殊寫法寫在後面。如：

div {
background: blue;
background: green\9;
*background: black;
_background: orange;
}

由於所有瀏覽器都識別標準寫法，而IE6/IE7/IE8/IE9/IE10/IE11可識別\9，IE6/IE7可識別*，IE6僅能識別_。根據CSS的疊加原理，後定義的屬性會覆蓋先定義的同名屬性，就實現了為IE各版本和現代瀏覽器應用不同樣式的目的。

2）選擇器字首法

即在CSS選擇器前，新增只有特定瀏覽器或某瀏覽器特定版本才能識別的字首，選擇器和字首之間用空格分隔。

常用的字首有 *html 和 *+html，*html 是IE6特有的字首，而 *+html 是IE7特有的字首。如：

*html p { color: blue;}/* IE6 */
*+html p { color: blue;}/* IE7 */

3）條件註釋法

條件註釋是IE瀏覽器專有的，也是微軟官方推薦的Hack方式。它是使用IE條件註釋，針對不同IE版本，編寫不同的CSS，來為不同版本的IE應用不同的樣式。

一種方法是直接在條件註釋中定義樣式。如：

<style>
<!--[if IE 6]>
div {
display: inline;
}
<![endif]-->
</style>

雖然這種方法可以解決一些現實的問題，但這些註釋需要放在HTML檔案，而不是CSS檔案中，樣式定義散落在多個地方，不便於維護，也容易出錯。也違背了內容與表現相分離的原則，故不推薦使用。

另一種方法是，編寫不同的CSS檔案，再使用IE條件註釋，通過 <link> 標籤，有針對性的載入外部樣式表。如：

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" />
<![endif]-->

這種方法卻會增加IE使用者的HTTP請求次數，影響訪問速度。所以，在使用這種方法前，要仔細斟酌，判斷是否真的有必要在自己的網站上使用它。

一個好訊息是，從IE10版本開始，不再支援條件註釋。這標誌著IE從此走向成熟、走向標準，Web設計師再也不必為IE的相容性問題所困擾了。

願望是美好的，現實卻是殘酷的。很多WEB設計師仍然發現，相同的CSS，在IE9/10/11上的渲染效果，和其它現代瀏覽器還是不一樣。

也就是說，我們仍然需要條件註釋。那麼，在不支援條件註釋的IE10/11上，能夠實現條件註釋的效果呢？

答案是肯定的。並且，有多種方法可以實現條件註釋的替代效果。並且，它們有各自的應用場景，可以根據需要選擇使用。

方法一：使用IE = EmulateIE9屬性，指示瀏覽器採用IE9渲染模式：

<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE9">

因為IE9是支援條件註釋的，在頁面的頭部加入以上的元資料後，IE10/11就使用IE9的渲染模式，自然就能識別條件註釋了。

很顯然，這樣做的弊端是，瀏覽器使用的是IE9的渲染模式，而不是最新的IE10/11的渲染模式。

方法二：使用媒體查詢語句的 +-ms-high-contrast 屬性，為不同瀏覽器應用不同的樣式。

CSS 的媒體查詢語句是一種高階的CSS條件語句，它能根據一些屬性和屬性值的計算結果，來判斷CSS是否可以生效。

由於只有IE10/11實現了 -ms-high-contrast 屬性，取值為active或none。因此，就可以使用以下媒體查詢語句：

@media all and(-ms-high-contrast: none),(-ms-high-contrast: active){
/* IE10+ CSS styles go here */
}

Firefox瀏覽器、Chrome瀏覽器不能識別這個屬性，這個語句中的CSS就不會生效，便間接實現了條件註釋的效果。

方法三：使用Javascript判斷瀏覽器的型別，來為不同瀏覽器定義不同的樣式。

先用Javascript 判斷瀏覽器的型別，如果是IE瀏覽器，就在頁面的 <html> 標籤上新增一個 ie 的類名：

<script>
var ms_ie =false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf("MSIE");
var new_ie = ua.indexOf("Trident/");
if((old_ie >-1)||(new_ie >-1)){
ms_ie =true;
}
if( ms_ie ){
document.documentElement.className +="ie ";
}
</script>

有了這個標誌性 class 後，就可以在CSS中，區分不同的瀏覽器，並專門針對IE編寫不同的CSS程式碼。如：

.testClass{
/* 這裡寫通用的css */
}
.ie .testClass{
/* 這裡寫專門針對IE的css */
}

事實上，這個方法還能區分老IE和新IE。因此，也可以區分老IE和新IE，並有針對性的編寫不同的CSS程式碼。

方法四：使用IE10/11私有的條件編譯特性，來區分IE6-9 和IE10/11。

<!--[if !IE]>
<script>
if (/*@[email protected]*/false) {
document.documentElement.className += "ie10 ";
}
</script>

上述指令碼中，先使用條件註釋 !IE來排除IE，以確保IE6-9不承認它。然後，再執行@ cc_on功能檢測。

CSS 相容瀏覽器的方法 CSS Hack

CSS Hack

CSS 相容瀏覽器的方法 CSS Hack

常用瀏覽器相容問題及css hack總結

CSS各瀏覽器相容方法

火狐瀏覽器CSS相容的解決方法

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等瀏覽器方法（非原創）

div css Firefox和IE瀏覽器相容問題用CSS實現cellSpacing屬性效果

IE瀏覽器下常見的CSS相容問題

CSS相容IE6/IE7/IE8/IE9/IE10的通用方法

低版IE常見相容問題與css hack

CSS —— 相容各個瀏覽器的select的樣式

各個瀏覽器下css hack的寫法

ie相容響應式佈局的實現總結和針對ie瀏覽器的CSS

做CSS固定視窗發現IE6下不相容，下面是解決position:fixed在IE6下不相容的方法

css相容多瀏覽器強制換行與不換行

css相容ie瀏覽器下面圓形問題

IE6,IE7,FireFox相容CSS的解決方法及CSS差別

CSS RESET —— 瀏覽器樣式重置

js寫css（）方法，記得加引號“ ”，除非是數字

CSS清除浮動方法

css修改瀏覽器默認的滾動條樣式

CSS 相容瀏覽器的方法 CSS Hack

CSS Hack

相關推薦