Question

我想使用display: inline-table和display: table-cell，但它不适用于像IE7这样的旧浏览器，所以我想要display: inline-block后备。

根据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

Answer 1

如果您只是在寻找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有一个错误，它与*:first-child匹配DOCTYPE节点，由于该节点是html元素的前一个兄弟节点，因此该规则适用。

IE6不支持:first-child，IE8及更高版本与DOCTYPE节点不匹配*。

将*:first-child+html添加到同一选择器还有另外一个好处，即增加选择器的特异性，因此它总是优先于IE7。

附加规则是完全有效的CSS。

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

看到它的实际效果

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

1 个答案: