如何在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`属性的回退值？

回答

相关问题