基于百分比的布局的差距 [英] gap in percentage based layout
问题描述
我在基于百分比的布局上遇到问题.这是我的代码 http://jsfiddle.net/uHkXH/
I'm having a problem with percentage based layout. Here is my code http://jsfiddle.net/uHkXH/
如果在Mac上使用Safari或Opera，在Windows上使用IE7，或在iPhone iPad上使用，则在右侧会出现间隙.但是四个盒子的宽度，内边距和边距应合计为100％.我不明白为什么仍然存在差距.
If your are using Safari or Opera on Mac, or IE7 on Windows, or iPhone iPad you will see a gap on the right side. But the width, padding and margin of four boxes should be 100% in total. I cannot understand why there is still a gap.
有人可以解释这个问题并帮助我解决吗?确实非常感谢您！
Does anyone can explain this problem and help me to solve it? Thank you very much indeed!
推荐答案
某些浏览器尝试舍入子像素(十进制)宽度会出现问题.百分比将自动转换为像素.
Its a problem with certain browsers trying to round subpixel (decimal) widths. The percentages are converted to pixels automatically.
如果您将jsfiddle中元素的计算宽度相加，则它们的总和不会等于容器元素的宽度.
If you go through and add up the calculated width in pixels of the elements in your jsfiddle they don't add up to the width of your container element.
更多信息 http://css-tricks.com/percentage-bugs-in-webkit/
和
和
我没有关于浏览器功能的确切详细信息，但我已经注意到过去.
I don't have exact details of what browsers do but I have noted the following in the past.
处理宽度像素时:
Firefox会将125.5px向上舍入为126px，并将125.4px舍入为四舍五入降到125像素.
Firefox will round 125.5px up to 126px and 125.4px will be rounded down to 125px.
Opera会将126.9px视为126px(但会将126.999视为127px!!)
Opera will treat 126.9px as 126px (but it will treat 126.999 as 127px !!)
IE会忽略所有小数点，并将126.9999px视为126px.
IE ignores all the decimal points and treats 126.9999px as 126px.
处理百分比时.
Opera似乎并没有注意到所有的小数部分百分比.例如33.9％仅等于正好33％.所以在宽度为1000px的情况下，对于33.333％的三个浮动，Opera将显示为10px右边缘有缝隙.
Opera doesn't seem to take any notice at all of the decimal portion of percentages. e.g 33.9% will only equate to exactly 33%. Therefore for three floats of 33.333% in a 1000px width Opera will show a 10px gap at the right edge.
Mozilla似乎保留了的小数部分的总计所使用的百分比，最多只能是完整像素的1像素宽度.
Mozilla seems to keep a running total of the decimal parts of percentages used and will at the most only be 1 pixel out on the full width.
IE分别将每个部分向上或向下取整，因此需要三舍五入浮动可能会太大3个像素，从而导致浮动下降.
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.
要阻止浮子掉入，即可以应用负向最后一个浮动的边距，将吸收额外的空间.(右边距:-3px).
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.
这就是大多数人只使用33％的原因，因为这样他们知道即使有微小的差距它也将适合所有浏览器根据情况可能并不明显.(例如背景后面元素的颜色可能会将其隐藏.)
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.)
这篇关于基于百分比的布局的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
