2

似乎 Internet Explorer 8、9、10 在这里总是使用相同的（系统）字体。事实上，Internet Explorer 根本不在乎font-family。重要的是display:table-celland :beforeor的组合: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>

这是一个已知的错误？找不到任何关于它的东西。

4

1 回答 1

3

http://jsfiddle.net/KnfaW/

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

用户代理必须忽略以下带有 :before 和 :after 伪元素的属性：'position'、'float'、列表属性和表格属性。

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

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

W3C CSS2

所以而不是display: table-cell使用display: block. 它将按预期工作。在这种情况下，我认为 IE 的错误处理可能有问题。

于 2013-08-02T14:50:28.400 回答