CSS - 100% 宽度流体布局的奇怪浏览器问题，为什么？

Question

好的，如果你去看看 http://furnace.howcode.com你会看到这个例子。 [该站点正在积极开发中，请原谅开发者之间的困惑/评论；)]

重现问题:点击“评分最高”标签。单击“PHP Array Looping”结果(这是最好的示例。请注意，数据是通过 Ajax 获取的，加载可能需要一些时间)。

在第三列空间中，条目将被返回*。

尽管 #col1 + #col2 + #col3 = 100% 的总宽度，浏览器仍然在右侧添加了 30px 的边距。大概这是滚动条会去的地方，但是否有任何方法可以可靠地填充该空间？遗憾的是，body 标签上的 overflow-x: hidden; 没有任何区别。

---

我还有一个问题，我认为它与这里的问题有关。我希望 #col3 结果应用 padding-left: 10px;。现在在盒子模型中，我明白填充不会改变外部空间，而是改变内部空间 - 遗憾的是，当我将 padding-left: 10px; 设置为 #col3 它消失了关闭页面。已经很晚了，我很累，咖啡因含量也很低，但我不知道为什么……! :)

谢谢，非常感谢您的帮助!我测试过的浏览器:Google Chrome、Firefox 3.6(均在 Mac 上)

jack

.

**对于丑陋的样式感到抱歉，我们已经完全重新考虑了设计，但我还不能重新设计它)*

Answer 1

您已为 3 列设置了最大宽度:

#col1
    max-width: 124px
#col2
    max-width: 529px
#col3
    max-width: 729px

这些设置在 http://furnace.howcode.com/scaffold/index.php?f=/stylesheets/master.css 中从第 349 行开始。

我建议您检查 Google Chrome 中的“Inspect Element”——在那里您可以轻松地即时更改 CSS 以尝试查看它是否被任何其他样式覆盖，我猜您的填充会发生这种情况。