基于百分比的布局差距

Question

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

如果你在Mac上使用Safari或Opera,在Windows或iPhone iPad上使用IE7,你会看到右侧有差距.但是四个盒子的宽度,填充和边距应该是100%.我不明白为什么还有差距.

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

Answer 1

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

如果您通过并计算jsfiddle中元素的计算宽度(以像素为单位),则它们不会累加到容器元素的宽度.

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

和

如何解决IE CSS百分比舍入问题？

和

嗨,

我没有关于浏览器做什么的确切细节,但我在过去已经注意到以下内容.

处理宽度像素时:

Firefox将在125.5xx到126px之间,125.4px将向下舍入到125px.

Opera将126.9px视为126px(但它将126.999视为127px !!)

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

在处理百分比时.

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

Mozilla似乎保持了所用百分比的小数部分的运行总和,并且最多只能在整个宽度上输出1个像素.

IE将每个部分单独向上或向下舍入,因此三个浮点数可能是3个像素太大,从而导致浮点下降.

要停止浮子下降,即你可以在最后一个浮子上施加一个负的右边距,以吸收额外的空间.(保证金右:-3px).

对于歌剧来说,没有办法,但也许是为了使最后一个元素适合所需的空间,或者使元素大于所需的元素并应用更大的右边缘.

这就是大多数人只使用33%的原因,因为他们知道它适合所有浏览器,即使存在一些根据情况可能不明显的微小差距.(例如,后面元素的背景颜色可能会隐藏它.)