Fatal编程技术网
  • html/
  • Html pre-inside li：修复Chrome和IE9中的格式

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

html

Html pre-inside li：修复Chrome和IE9中的格式,html,cross-browser,html-lists,pre,Html,Cross Browser,Html Lists,Pre,我有这个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 cod

我有这个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>


前{
溢出：自动；
}

  • 
一些
代码代码代码代码代码代码代码代码代码代码代码代码代码
代码
    • 

  • 代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码代码
    •
    其目的是，这将导致预格式化文本位的编号列表。当这些文本位很长时，将通过溢出：auto；的方式添加滚动条

    这在Firefox20中运行良好。但是，在IE9中，预格式化文本下移一行（因此每个项目现在有两行，一行表示数字，一行表示预格式化文本）。在Chrome中，格式是正确的，只是数字没有显示出来

    我尝试更改为溢出：滚动，但没有效果。还尝试将doctype更改为无效

    当你去掉溢出时，Chrome和IE9中的问题都消失了：auto；，但是你再也看不到滚动条了，这对我来说很重要

    有没有一种方法不仅在Firefox中，而且在IE9和Chrome中都能正确显示此内容？

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

    我无法在Chrome或Internet Explorer（8、9或10）中重现此问题。你确定没有任何废弃标签吗？&&经过一些实验，我发现问题是由溢出：自动或溢出：滚动引起的。我编辑了我最初的问题以反映这一点。你找到解决方案了吗？我现在对Chrome 33.0.1750.152有同样的行为。解决此问题的唯一方法是在
    pre
    元素前面添加额外的流内容（或禁用
    overflow:auto
    ）。。。 
    li:before {
content: "";
}