我在使用基于百分比的布局时遇到问题。这是我的代码http://jsfiddle.net/uHkXH/
如果您在 Mac 上使用 Safari 或 Opera，或在 Windows 上使用 IE7，或在 iPhone iPad 上使用，您会在右侧看到一个空白。但是四个盒子的宽度、内边距和边距总共应该是 100%。我不明白为什么还有差距。
有人可以解释这个问题并帮助我解决它吗？真的非常感谢！
【问题讨论】：
标签： css responsive-design
某些浏览器尝试对子像素（十进制）宽度进行四舍五入时会出现问题。百分比会自动转换为像素。
如果您将 jsfiddle 中元素的计算宽度（以像素为单位）相加，则它们不会与容器元素的宽度相加。
这里有更多信息 http://css-tricks.com/percentage-bugs-in-webkit/
和
How do I get around the IE CSS percentage rounding problem?
和
嗨，
我没有浏览器功能的确切细节，但我已经注意到 追随过去。
处理宽度像素时：
Firefox 将四舍五入 125.5px 到 126px 并且 125.4px 将四舍五入 低至 125 像素。
Opera 会将 126.9px 视为 126px（但会将 126.999 视为 127px !!)
IE 会忽略所有小数点，将 126.9999px 视为 126px。
在处理百分比时。
Opera 似乎根本没有注意到 百分比。例如，33.9% 仅等于 33%。所以 对于 33.333% 的三个浮点数，宽度为 1000 像素，Opera 将显示 10 像素 右边缘的间隙。
Mozilla 似乎保留了小数部分的总和 使用的百分比，最多只有 1 个像素 宽度。
IE 将每个部分单独向上或向下舍入，因此为三个 浮点数可能会太大 3 个像素，从而导致浮点数下降。
要阻止浮动下降，即您可以应用负权 将吸收额外空间的最后一个浮动的边距。 （右边距：-3px）。
对于歌剧，没有治愈方法，但也许要使最后一个元素适合 所需的空间或使元素大于所需的空间和 应用更大的右负边距。
这就是大多数人只使用 33% 的原因，因为那时他们 知道它会适合所有浏览器，即使有一点差距 视情况而定，可能不明显。 （例如背景 后面元素的颜色可能会隐藏它。）
【讨论】：