如何在CSS中使用`display`屬性的回退值？

我想使用display: inline-table和display: table-cell，但它不適用於像IE7這樣的舊瀏覽器，所以我想要一個display: inline-block回退。如何在CSS中使用`display`屬性的回退值？

據http://afshinm.name/css-fallback-properties-better-cross-browser-compatibility/，與color財產有可能使用

.me { 
    color: #ccc; 
    color: rgba(0, 0, 0, 0.5); 
}

然後，我試過

#wrapper { 
    display: inline-block; 
    display: inline-table; 
} 

#wrapper > .child { 
    display: inline-block; 
    display: table-cell; 
}

但IE7嘗試使用的display: inline-table，display: table-cell代替display: inline-block，即使他們不」工作。

注意

我不想用JS也不條件註釋裏面另一個樣式表來實現這一
我希望它是有效的CSS

來源

2013-09-22 Oriol

看到它在行動有效的CSS方法可能僅是可能的條件註釋。 –

適合IE7的降級 – Paramasivan

@Paramasivan如何？ – Oriol

提供了你只是尋找IE7的後備解決方案，這可以做到。

添加一個以*:first-child+html開頭的新規則，只有IE7會識別它。

所以你的情況增加

*:first-child+html #wrapper { 
    display: inline-block; 
} 

*:first-child+html #wrapper > .child { 
    display: inline-block; 
}

爲什麼*:first-child+html？那麼，它就是一個html元素，它是其他元素的後續兄弟元素，它是其共同父元素的第一個子元素。儘管可以在無效的application/xhtml+xml-XHTML中通過JavaScript創建這樣的DOM，但在正常的HTML中，HTML解析器規則意味着根本不會發生。

但IE7有一個bug，它與*:first-child相對於DOCTYPE節點相匹配，因爲該節點是html元素的前一個兄弟節點，所以該規則適用。

IE6不支持:first-child，IE8及更高版本針對DOCTYPE節點不匹配*。

將*:first-child+html添加到相同的選擇器有額外的好處，增加了選擇器的特異性，所以它總是優先於IE7。

附加規則是完全有效的CSS。

您可以在http://alohci.net/static/ie7cssfallback.htm

來源

2013-09-29 01:27:10 Alohci

如何在CSS中使用`display`屬性的回退值？

回答

相關問題