为什么'overflow：auto'CSS在使用某些浏览器时无效

Question

我去了设置＆gt; 修改主题＆gt; 高级并将其添加到<style type="text/css">下，但它不起作用：

pre { overflow: auto; }
code { background-color: LightGrey; padding: 1px 3px; }

使用Chromium访问时，第一个语句不会生效（我希望出现水平滚动）。我为演示目的添加的第二个效果很好。

在这里the page你可以看一下它是如何运作的。

我已经使用这些浏览器进行了测试：

• Chromium和Epiphany不工作
• Firefox和Konqueror的作品

更新

关注a suggestion后，我在whitespace代码中尝试了所有这些<pre>属性：正常， nowrap ，预，预行和预先包装。问题依然存在。

Answer 1

要显示水平滚动条，您需要添加：

pre { white-space: nowrap; }

Answer 2

在实际页面上你有css：

pre { overflow: auto; white-space: pre-line; }

这会覆盖任何其他white-space声明，因此它不会有水平滚动。将此更改为white-space: nowrap可解决问题。

Answer 3

如果你浮动.code，那么它将起作用：

.code {float: left;}
pre { white-space: pre;}