在Chrome中丢失1％

我正在构建浮动div的3列布局。我有一个20px的填充容器。在容器中，我有一个全宽块，后面是3列，接着是另一个全宽块。列浮动到左侧。宽度：31％，边距：0 1％。这增加了99％; 全宽度块的边距为0 2％0 1％。这也增加了99％。在Chrome中丢失1％

Mozilla和IE渲染一切都很完美，但Chrome为全宽块添加了1％。我无法理解计算。

你可以看看：schoolscout.co.uk。

来源

2011-03-25 hypeJunction

这是回答同样的问题？ http://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css – ajcw 2011-03-25 22:14:01

因为不同的渲染引擎以不同的方式计算像素的百分比。 John Resig在他的文章Sub-Pixel Problems in CSS中提供了一个很好的概述。

图片包含有表示可以出现什么问题一个很好的例子：

两个Opera和Safari [和其它基于WebKit的浏览器，MK]圆了所有的div的宽度以12像素。这会在所有div的右侧留下2px的间隔（注意绿色）。如果你想知道为什么你的对齐导航没有在这些浏览器中填充容器的全部内容，现在你知道为什么了。从好的方面来说，至少你知道这些容器的宽度都是一样的，不管是什么。

看你的页面，这就是我得到：

    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

来源

2011-03-25 22:12:06

谢谢。这就是我认为正在发生的事情。有没有很好的解决方法？我想保持流畅的布局......你认为为webkit定义一个不同的边缘是有意义的吗？ – hypeJunction 2011-03-26 11:43:58

@user：如果总和的总和与宽列相同（不包括一些边距），并且相应地更正这些宽度（您可以执行onload和onresize），则可以使用JavaScript进行测试。 – 2011-03-27 10:05:01

在Chrome中丢失1％

回答

相关问题