CSS hack 屬性 相容IE6 7 8 9

2021-06-22 14:01:13 字數 701 閱讀 7976

整理的css hack 屬性的使用:

針對不同瀏覽器實現類似的效果,我們可能都會想到css hack這個東西,讓不同的瀏覽器下引用不同的css屬性或是不同的css屬性值。

經過測試

末尾 屬性值:\0                                             支援:ie8 和ie9

首位 屬性值:(:root)  末尾 屬性值:\9            支援:ie9

末尾 屬性值:\0/                                            支援:ie8

首位 屬性值:*                                              支援:ie6 

首位 屬性值:* +                                           支援:ie7

首位 屬性值:_                                              支援:ie6

以下為案例

html** : 

測試

css**:

:root p

p* + html p

* html p

演示出來的結果應是:ie9為#00f、 ie8為#0f0 、 ie7 為#f0f 、ie6 為#f00

css相容問題 ie6,7

h5標籤相容 元素浮動之後能設定寬度的話就給元素加寬度,如果需要元素寬度是內容撐開,就給他裡面的塊元素加上浮動 第一塊加浮動,第二塊加margin等於第一塊元素在ie6下會有間隙問題 ie6下子元素超出父級寬高,會吧父級的寬高撐開 p td h包含塊元素的巢狀規則 margin相容問題 displa...

IE6,7下的那些坑

lang en charset utf 8 title type text css warp box style head class warp class box div div body html 在ie6 ie7,ie8,chrome,firefox顯示效果 當使box元素為浮動元素時 box...

IE6 7下如何實現inline block

ie6,ie7的haslayout屬性是個讓人頭疼的問題。在做導航條的時候,一般會用到ul li結構,大多數時候我們是把li設定為浮動,讓其併排顯示在同一行。還有一種方法就是設定li為display inline 這樣可以達到同樣的效果,但是問題是inline元素的特性 預設無法設定寬度,高度,以及...