Question

我有这个HTML：

<!DOCTYPE html>
<html>
<head>
<style>
pre {
    overflow: auto;
}
</style>
</head>

<body>
<ol>
<li>
<pre>some
 code code code code code code code code code code code code code code code code code code code 
code code</pre></li>
<li><pre>some more code code code code code code code code code code code code code code code code code code code code code</pre></li>
</ol>
</body>
</html>

意图是这将产生预先格式化的文本位的编号列表。当这些文本位很长时，通过 overflow：auto; ，将添加滚动条。

这在Firefox 20中工作正常。但是，在IE9中，预格式化文本向下移动一行（因此每个项目现在需要两行，一行用于数字，一行用于预格式化文本）。在Chrome中格式化是正确的，但数字不会显示。

我尝试更改为溢出：滚动，无济于事。还尝试将doctype更改为＆lt;！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＆gt; 无效。

当你拿出 overflow：auto; 时，Chrome和IE9中的问题都会消失，但是你不再得到滚动条了，这对我来说很关键。

有没有办法让这个节目不仅在Firefox中正确显示，还在IE9和Chrome中正确显示？

Answer 1

在每个li之前添加一个空伪元素

li:before {
content: "";
}

pre inside li：修复Chrome和IE9中的格式

1 个答案: