Question

某些浏览器是否有可能以不同的方式计算％宽度？

以下是代码：http://jsfiddle.net/yuliantoadi/9eqMg/2/

html：

<div class="grid_6">
grid 6
</div>
<div class="grid_6">
grid 6
</div>
<div class="grid_1">
grid 1
</div>
<div class="grid_2">
grid 2
</div>
<div class="grid_4">
grid 4
</div>
<div class="grid_5">
grid 5
</div>

css：

[class^=grid_]{
    float:left;
    margin-left:1%;
    margin-right:1%;
    margin-bottom:5px;
    background-color:red;
}
.grid_1 {
    width:6.333%;
}
.grid_2{
    width:14.666%
}
.grid_4{
    width:31.333%
}
.grid_5{
     width:39.666%;
 }
.grid_6{
    width:48%;
}

在Firefox中，12个网格设计是可以的，然后我在Safari中检查，我发现了问题。你可以看到，如果你在Safari或Chrome中打开代码，网格5之后会有一点空间。

Answer 1

我的经验是，宽度百分比IS的处理方式不同 - 有些浏览器向上舍入，有些向下舍入，有些只是从实际的PIXEL宽度中删除任何尾随小数（请记住，你不能渲染半个像素）。但不要问我为什么或何时。

Answer 2

我会说这种情况正在发生，因为Safari正在向上移动39.666％，而firefox正在向下舍入它。我建议强制四舍五入。而不是去3位小数，转到没有。但是，您最终可能会出现不均匀的网格。试一试，知道。

Answer 3

浏览器当前的实现存在子像素问题。阅读更多：ejohn.org/blog/sub-pixel-problems-in-css /

CSS流体12网格设计问题

3 个答案: