我正在构建一个带有 float div 的 3 列布局。 我有一个带有 20px 填充的容器。在容器内，我有 1 个全宽 block ，然后是 3 列，再接着是另一个全宽 block 。 列向左浮动。宽度:31%，边距:0 1%。这加起来达到 99%； 全宽 block 的边距为 0 2% 0 1%。这也加起来达到 99%。
Mozilla 和 IE 完美呈现所有内容，但 Chrome 又增加了 1% 的全宽 block 。我看不懂计算。
你能不能看一下:schoolscout.co.uk .
最佳答案
因为不同的渲染引擎计算像素的百分比不同。 John Resig 在他的文章 Sub-Pixel Problems in CSS 中提供了一个很好的概述。 .
此处包含的图片展示了可能出错的一个很好的例子:
Both Opera and Safari [and other WebKit-based browsers, MK] round down the widths of all the divs to 12px. This leaves a 2px gap (note the green) to the right of all the divs. If you’ve ever wondered why your nicely-aligned navigation doesn’t fill up the full contents of a container in these browsers, now you know why. On the plus side, at least you know what the width of these containers will all be the same, no matter what.
查看您的页面，这是我得到的:
m b p w p b m total Chrome column_header 6 1 - 674 - 1 13 695 column 6 - - 215 - - 6 227 Firefox column_header 6 1 - 673 - 1 13 694 column 6 - - 216 - - 6 228
关于css - 1% 迷失在 Chrome 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5438148/