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>
这是一个已知的错误吗？找不到任何相关内容。
最佳答案
在我看来，display: table-cell 导致了这个问题。
User agents must ignore the following properties with :before and :after pseudo-elements: 'position', 'float', list properties, and table properties.
The :before and :after pseudo-elements elements allow values of the 'display' property as follows:
If the subject of the selector is a block-level element, allowed values are 'none', 'inline', 'block', and 'marker'. If the value of the 'display' has any other value, the pseudo-element will behave as if the value were 'block'.
If the subject of the selector is an inline-level element, allowed values are 'none' and 'inline'. If the value of the 'display' has any other value, the pseudo-element will behave as if the value were 'inline'.
因此，不要使用 display: table-cell，而是使用 display: block。它将按预期工作。在我看来，在这种情况下 IE 的错误处理可能会出现错误。
关于css - 伪元素中的字体系列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18019697/