html - 收缩时 Div 不会 100% 填满容器

Question

假设您有 5 个 div。一个是容器，另外四个是 child 。您已将每个设置为容器的 25%，并为每个设置了与容器背景分开的背景。

当您调整浏览器大小时，您的 4 个 div 在某个时间点并没有完全跨越，它们可能会偏离几个像素。有没有办法阻止这种形式的发生？我假设它正在发生，因为它“捕捉到每个像素”，因此在调整浏览器大小时会留下一个小间隙。

#container { 
    width: 100%;
    background: #000;
}
.children {
    width: 25%;
    float: left;
    background: #fff;
 }

JSFiddle:http://jsfiddle.net/AEvUL/

Safari 中 JSFiddle 页面的屏幕截图:http://cl.ly/image/1o1O2O401E0f

Answer 1

John Resig 有一篇关于这个问题的帖子，使用这个确切的案例作为例子。

http://ejohn.org/blog/sub-pixel-problems-in-css/

Take the following page for example. You have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px. Here’s the question: How wide are each of the divs?

The problem lies in the fact that each div should be, approximately, 12.5px wide and since technology isn’t at a level where we can start rendering at the sub-pixel level we tend to have to round off the number. The problem then becomes: Which way do you round the number? Up, down, or a mixture of the two? I think the results will surprise you, as they did me.

关于这个主题还有几个 Stack Overflow 问题:

• > safari rounding down on subpixel calculations
• > percent (%) width rendered differently in different browser (firefox, safari, opera, chrome)