伪元素中的字体系列答案

【问题标题】：Font family in pseudo element伪元素中的字体系列
【发布时间】：2013-08-03 21:21:03
【问题描述】：

似乎 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>

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

【问题讨论】：

见：stackoverflow.com/questions/14698234/…
不，这不是问题！当我切换到display: inline-block; 时，它可以工作。与monospace 无关。如果您想在其中放入任何其他真实字体。
你的伪元素是否在 IE7 中工作？
整个演示是重现问题所必需的还是可以简化？
@user1671639 抱歉，我会解决这个问题。

标签： css internet-explorer pseudo-element css-tables

【解决方案1】：

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 的错误处理可能有问题。

【讨论】：

是的，我知道。但找不到任何关于它的信息。
不幸的是，建议display: block 不是我的解决方案；这也不是问题。我会说 Internet Explorer 的异常处理在这里是错误的，因为它的行为不像block，因为它忽略了属性font-family，它不是position、float、列表或表属性。此外，所有浏览器，甚至 Internet Explorer，都会忽略该规范，因为它们将伪元素视为 table-cell。
jsfiddle.net/vE35V 看看这个。我希望它可以帮助您找到解决问题的方法。