我在使用基于百分比的布局时遇到问题。这是我的代码http://jsfiddle.net/uHkXH/
如果您在 Mac 上使用 Safari 或 Opera，或在 Windows 上使用 IE7，或 iPhone iPad，您会在右侧看到一个空白。但是四个框的宽度、内边距和外边距总共应该是 100%。我不明白为什么还有差距。
有谁可以解释这个问题并帮助我解决它？真的非常感谢！
问问题
2826 次
1 回答
6
某些浏览器试图舍入子像素（十进制）宽度是一个问题。百分比会自动转换为像素。
如果您将jsfiddle中元素的计算宽度加起来，它们不会加到容器元素的宽度上。
这是更多信息 http://css-tricks.com/percentage-bugs-in-webkit/
和
和
你好，
我没有关于浏览器做什么的确切细节，但我过去已经注意到以下内容。
处理宽度像素时：
Firefox 会将 125.5 像素四舍五入为 126 像素，而 125.4 像素将向下舍入为 125 像素。
Opera 会将 126.9px 视为 126px （但会将 126.999 视为 127px !!）
IE 会忽略所有小数点并将 126.9999px 视为 126px。
在处理百分比时。
Opera 似乎完全没有注意到百分比的小数部分。例如，33.9% 仅等于 33%。因此，对于 33.333% 的 33.333% 的三个浮点数，Opera 将在右边缘显示 10px 的间隙。
Mozilla 似乎保留了所用百分比的小数部分的总和，并且在整个宽度上最多只有 1 个像素。
IE rounds each portion up or down individually and therefore for three floats will possibly be 3 pixels too big thus causing a float drop.
To stop the floats dropping in ie you can apply a negative right margin to the last float that will soak up the extra space. (margin-right:-3px).
For opera there is no cure but perhaps to make the last element fit the space required or to make the elements bigger than needed and apply a larger right negative margin.
This is the reason that most people simply use 33% because then they know it will fit all browsers even if there is a slight gap which depending on the situation may not be noticable. (e.g. the background color of the element behind may hide it.)
于 2012-08-15T17:14:16.820 回答