我在使用基于百分比的布局时遇到问题。这是我的代码 http://jsfiddle.net/uHkXH/
如果您在 Mac 上使用 Safari 或 Opera，或者在 Windows 上使用 IE7，或者在 iPhone iPad 上，您会在右侧看到一个缺口。但是四个box的width，padding，margin加起来应该是100%。我不明白为什么还有差距。
有没有人可以解释这个问题并帮助我解决它？真的非常感谢!
最佳答案
这是某些浏览器试图舍入子像素(小数)宽度的问题。百分比会自动转换为像素。
如果您在 jsfiddle 中遍历并添加元素的计算宽度(以像素为单位)，它们不会加起来等于您的容器元素的宽度。
这里有更多信息 http://css-tricks.com/percentage-bugs-in-webkit/
和
How do I get around the IE CSS percentage rounding problem?
和
Hi,
我不知道浏览器做什么的确切细节，但我注意到了 跟随过去。
处理宽度像素时:
Firefox 会将 125.5px 四舍五入到 126px，而 125.4px 将四舍五入 低至 125px。
Opera 会将 126.9px 视为 126px(但它将 126.999 视为 127px !!)
IE 忽略所有小数点并将 126.9999px 视为 126px。
处理百分比时。
Opera 似乎完全没有注意到小数部分 百分比。例如，33.9% 仅等于 33%。所以 对于 1000 像素宽度的三个 33.333% 的 float ，Opera 将显示 10 像素 右边缘的间隙。
Mozilla 似乎保留了小数部分的总和 使用的百分比，最多只有 1 个像素 宽度。
IE 将每个部分分别向上或向下舍入，因此对于三个 float 可能会太大 3 个像素，从而导致 float 下降。
要停止 float ，即您可以应用负权 最后一个 float 的边距将吸收额外的空间。 (右边距:-3px)。
对于歌剧来说，没有治愈的方法，但也许可以使最后一个元素适合 所需的空间或使元素比需要的更大，并且 应用更大的右负边距。
这就是大多数人简单地使用 33% 的原因，因为那时他们 知道它适用于所有浏览器，即使存在微小的差距 视情况而定可能不明显。 (例如背景 后面元素的颜色可能会隐藏它。)
关于css - 基于百分比的布局中的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11973556/