Question

似乎Internet Explorer 8,9,10在这里总是使用相同的（系统）字体。事实上，Internet Explorer根本不关心font-family。重要的是display:table-cell和:before或:after：

的组合

<!DOCTYPE html>
<html>
<head>
    <style>

        body > div {
            display: table;
        }

        body > div > div:before {
            font-family: monospace;
            display: table-cell;
            content: 'Not a monospace font in IE.';
        }
    </style>
</head>
<body>
    <div>
        <div>
        </div>
    </div>
</body>
</html>

这是一个已知的错误吗？找不到任何关于它的信息。

Answer 1

http://jsfiddle.net/KnfaW/

在我看来，display: table-cell会导致问题。

用户代理必须忽略以下属性：before和：after伪元素：'position'，'float'，列表属性和表属性。

：before和：after伪元素元素允许'display'属性的值如下：

如果选择器的主题是块级元素，则允许的值为“none”，“inline”，“block”和“marker”。如果'display'的值具有任何其他值，则伪元素的行为就像值为'block'。
  如果选择器的主题是内联级元素，则允许的值为“none”和“inline”。如果'display'的值具有任何其他值，则伪元素的行为就像值是'inline'一样。

W3C CSS2

而不是display: table-cell使用display: block。它将按预期工作。在我看来，IE的错误处理在这种情况下可能是错误的。

伪元素中的字体系列

1 个答案: