基于百分比的布局差距

Question

我遇到基于百分比的布局问题。这是我的代码http://jsfiddle.net/uHkXH/

如果您在Mac上使用Safari或Opera，或在Windows上使用IE7或iPhone iPad，您将看到右侧有间隙。但是四个盒子的宽度，填充和边距应该是100％。我不明白为什么还有差距。

有没有人可以解释这个问题并帮助我解决它？非常感谢你！

Answer 1

某些浏览器尝试舍入子像素（十进制）宽度时出现问题。百分比自动转换为像素。

如果你经过并计算jsfiddle中元素的计算宽度（以像素为单位），则它们不会累加到容器元素的宽度。

以下是一些更多信息 http://css-tricks.com/percentage-bugs-in-webkit/

和

How do I get around the IE CSS percentage rounding problem?

和

  

    

您好，

  

     

我没有确切知道浏览器的功能，但我注意到了   跟随过去。

     

处理宽度像素时：

     

Firefox将圆形125.5xx到126px，125.4px将四舍五入   降至125px。

     

Opera将126.9px视为126px（但它将126.999视为127px   !!）

     

IE忽略所有小数点，并将126.9999px视为126px。

     

处理百分比时。

     

Opera似乎没有注意到所有的小数部分   百分比。例如33.9％仅相当于33％。因此   对于三个浮点数为33.333％的1000px宽度Opera将显示10px   右边缘的差距。

     

Mozilla似乎保持了小数部分的运行总计   使用的百分比，最多只有1像素   宽度。

     

IE将每个部分单独向上或向下舍入，因此对于三个部分   浮动可能是3像素太大，从而导致浮动下降。

     

要停止浮动，即可以应用否定权利   最后一个浮动的边距将吸收额外的空间。   （余量右：-3px）。

     

对于歌剧来说，没有办法，但也许是为了使最后一个元素适合   所需的空间或使元素大于所需的空间   应用较大的右边负边距。

     

这就是为什么大多数人只使用33％因为他们   知道它适合所有浏览器，即使存在微小差距   视情况而定可能并不明显。 （例如背景   背后元素的颜色可能会隐藏它。）