百分比宽度和1像素边框

Question

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

一个演示我的问题的fiddle（已测试OS X Safari和Chrome）

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

- user393219

---

这很奇怪，以前没有见过。对于非HTML5元素也适用：http://jsfiddle.net/Kyle_Sevenoaks/HXyZ7/2/ - Kyle

就目前而言，在Chrome Ubuntu上看起来很不错。 - nickf

@nickf 程序员都喜欢一致性。 - user393219

Answer 1

您可以使用overflow:hidden;。写法如下：

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

请查看这个http://jsfiddle.net/HXyZ7/7/

- sandeep

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/ ​

- Pheonix

Answer 3

Webkit有计算百分比数值的问题。

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

- Michael

Answer 4

你使用了整个宽度，但是你的浮动选项导致了这个问题。 只使用一个浮动方向（这里是左边）。

不幸的是，我不知道为什么会出现这种情况。

编辑示例
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%;   
}

- Smamatti

---

这是正确的，但仔细看，Article元素右侧仍然可见间隙。 - Kyle