百分比宽度和 1px 边框

Question

我注意到，在Safari和Chrome的当前版本中，当我并排创建元素时，四舍五入到一个100%的整数，我会得到一个调整大小的小像素边界（因为我没有为元素/div使用白色背景）。我觉得我只是缺少了一个位置属性，但我在谷歌上找不到任何资源来帮助我。

一个小提琴来说明我的问题（OS X Safari和Chrome测试）

http://jsfiddle.net/shawnstrickland/HXyZ7/

Answer 1

您可以使用overflow:hidden;。这样写：

nav {
    float: left;
    width: 25%;
    background-color: blue;
}
article {
    overflow:hidden;
    background-color: red;   
}

​

检查这个http://jsfiddle.net/HXyZ7/7/

Answer 2

当我将空白增加到75.3:p 时，空白消失

nav {
    float: left;
    width: 25%;
    background-color: blue;
}
article {
    float: right;
    clear:none;
    background-color: red;
    width: 75.3%;   
}

http://jsfiddle.net/sJQeZ/​

Answer 3

Webkit在计算百分比值时遇到问题。

http://css-tricks.com/percentage-bugs-in-webkit/

Answer 4

您使用了整个witdh，但您的浮动选项造成了这个问题。仅使用一个浮动方向（此处左侧）。

不幸的是，我不知道为什么会发生这种事。

编辑样本
http://jsfiddle.net/HXyZ7/1/

nav {
    float: left;
    width: 25%;
    background-color: blue;
}
article {
    float: left; /* was floating right before */
    background-color: red;
    width: 75%;   
}