css相關IE的問題 如width等

使用CSS hack進行設置。CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。

 

1.原理

 

　　因爲不一樣的瀏覽器對CSS的支持及解析結果不同，還因爲CSS中的優先級的關係。咱們就能夠根據這個來針對不一樣的瀏覽器來寫不一樣的CSS。

　　CSS Hack大體有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，CSS Hack主要針對類內部Hack：好比 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等

　　選擇器Hack：好比 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。等等

　　HTML頭部引用(if IE)Hack：針對全部IE：<!--[if IE]><!--您的代碼--><![endif]-->，針對IE6及如下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->，這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

　　書寫順序，通常是將識別能力強的瀏覽器的CSS寫在後面。下面如何寫裏面說得更詳細些。

二、經常使用的CSS hack方式

　　

　　（1）方式一 條件註釋法

　　只在IE下生效

　　<!--[if IE]>

　　這段文字只在IE瀏覽器顯示

　　<![endif]-->

　　只在IE6下生效

　　<!--[if IE 6]>

　　這段文字只在IE6瀏覽器顯示

　　<![endif]-->

　　只在IE6以上版本生效

　　<!--[if gte IE 6]>

　　這段文字只在IE6以上(包括)版本IE瀏覽器顯示

　　<![endif]-->

　　只在IE8上不生效

　　<!--[if ! IE 8]>

　　這段文字在非IE8瀏覽器顯示

　　<![endif]-->

　　非IE瀏覽器生效

　　<!--[if !IE]>

　　這段文字只在非IE瀏覽器顯示

　　<![endif]-->

　　（2）方式二 類內屬性前綴法

　　屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展示效果。

　　IE瀏覽器各版本 CSS hack 對照表

 

說明：在標準模式中

「-″減號是IE6專有的hack

「\9″ IE6/IE7/IE8/IE9/IE10都生效

「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

（3）CSS hack方式三：選擇器前綴法

選擇器前綴法是針對一些頁面表現不一致或者須要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

目前最多見的是

*html *前綴只對IE6生效*+html *+前綴只對IE7生效@media screen\9{...}只對IE6/7生效@media \0screen {body { background: red; }}只對IE8有效@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效@media screen\0 {body { background: green; }} 只對IE8/9/10有效@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等

 

三、實際應用

好比要分辨IE6和firefox兩種瀏覽器，能夠這樣寫：

div{background:green;/*forfirefox*/*background:red;/*forIE6*/(bothIE6&&IE7)}

我在IE6中看到是紅色的，在firefox中看到是綠色的。

　　解釋一下：

　　上面的css在firefox中，它是認識不了後面的那個帶星號的東西是什麼的，因而將它過濾掉，不予理睬，解析獲得的結果是:div{background:green},因而理所固然這個div的背景是綠色的。

　　在IE6中呢，它兩個background都能識別出來，它解析獲得的結果是:div{background:green;*background:red;},因而根據優先級別，處在後面的red的優先級高，因而固然這個div的背景顏色就是紅色的了。

四、因此單獨定義IE六、七、8的width屬性代碼以下

1 2 3 4 5

div{ width : 200px ; /*全部瀏覽器都能識別 包括IE7*/ - width : 180px ; /*只有IE6識別，識別後會覆蓋通用width的設置，達到IE6單獨設置的效果*/ - width : 180px \ 0 ; /*IE8以上的瀏覽器識別，識別後會覆蓋通用width的設置，達到IE8單獨設置的效果*/ }