如何在 CSS 中为“display”属性使用后备值？答案

【问题标题】：How to use fallback values for `display` property in CSS?如何在 CSS 中为“display”属性使用后备值？
【发布时间】：2013-09-27 16:24:20
【问题描述】：

我想使用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，即使它们不起作用。

备注

我不想在条件 cmets 中使用 JS 或其他样式表来实现这一目标
我希望它是有效的 CSS

【问题讨论】：

一个有效的 CSS 方法可能只有使用条件 cmets 才能实现。
IE7 优雅降级
只是一个我没有尝试过的建议，!important 标签有帮助吗？我知道把cursor: hand; cursor: pointer !important; 经常做...
AFAIK，在 IE7 中 display:inline-block 仅适用于像 spans 这样的初始内联元素。所以问题可能不在于浏览器尝试使用不支持的值，而在于它们也不支持回退并最终使用默认显示：块。 Inline-block 可以在 IE7 中模拟，使用 display:inline 和 zoom:1（或任何其他启用 hasLayout 的属性）。
@IlyaStreltsyn 哦，我以为我说过但我忘了。在我的情况下，这不是问题，因为默认情况下元素是内联的，所以 inline-block 应该可以工作。问题是，由于不支持 inline-table 和 table-cell，元素的行为 inline

标签： css fallback

【解决方案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-served 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看到它的实际应用

【讨论】：