Question

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

说明我的问题的小提琴（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%;   
}

百分比宽度＆amp; 1px Borders

4 个答案: