Question

<!DOCTYPE html>
<html>
    <head>
        <style>
        div:before {
            display: table-cell;
            content: "ABC";
            color: red;
        }
        </style>
    </head>
    <body>
        <div>123</div>
    </body>
</html>

我希望这会渲染到类似 expected 的内容，但我只会在Internet Explorer（任何版本）上运行时获得 actual 。

这是一个错误还是我做错了什么？

Answer 1

这似乎是IE中的一个错误。如果您在IE 11开发人员工具中检查该元素，您会看到:before伪元素的所有声明都被删除（如果添加它们，也会显示font设置），但是display和content设置会影响渲染。

为了避免这个错误，在这个简单的情况下，将display: block设置为@BeatAlex建议就足够了。在更复杂的情况下，您可能需要更复杂的解决方法。

Answer 2

这似乎是一种回归。它适用于Windows 7上的IE8，但不适用于IE9或更高版本，即使在IE8模式下也是如此。有趣的是我之前没有注意到这一点，因为我记得前一段时间我遇到过同样的问题。我从来没有考虑过这样的事情可能会倒退，但更不用说比较IE8和IE9中的结果了。

其他与字体相关的样式也会受到影响。据报道before，但除了“我们正在研究它”之外似乎没有任何反应，那是一年前的事。

变通方法包括将display: table-cell与实际元素而不是伪元素一起使用，或者根本不使用display: table-cell - 如果您不是绝对需要表格，请使用display-block基于布局。

IE不着色：之前作为table-cell，为什么？

2 个答案: