1

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

这是代码：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%;
}

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

4

3 回答 3

1

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

于 2011-06-22T06:57:43.513 回答
1

我会说这是因为 Safari 将 39.666% 向上舍入，而 Firefox 将其向下舍入。我建议强制四舍五入。而不是去小数点后 3 位，去无。但是，您最终可能会得到一个不均匀的网格。试一试，让我知道。

于 2011-06-22T07:02:13.737 回答
1

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

于 2011-09-23T09:33:12.450 回答