1

我想使用display: inline-tableand 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
4

1 回答 1

0

如果您只是在寻找 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-childDOCTYPE 节点匹配，因为该节点是 html 元素的前一个兄弟节点，所以该规则适用。

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

添加*:first-child+html到同一个选择器具有增加选择器特异性的额外好处，因此它在 IE7 中将始终优先。

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

您可以在http://alohci.net/static/ie7cssfallback.htm看到它的实际效果

于 2013-09-29T01:27:10.137 回答