css – chrome中的float bug？ 1px额外填充,但它不填充

以下html和css显示容器内的两个div.左边的div没有浮动;正确的div是浮动的.

右边的div似乎是一个太窄的像素,因此容器的红色背景颜色在一个像素间隙中显示出来.

这是我的问题的简化. http://jsfiddle.net/XPd9J/

HTML

<div class="inner-wrapper">

    <div class="right-sidebar">
        &nbsp;
    </div>

    <div class="content">
        &nbsp;<br /><br />
    </div>

</div>​

CSS

.inner-wrapper {
    position:relative;
    background-color:red;
    overflow:auto;
    width:90%;
    padding:0;
    margin:20px 0 0 20px;
}
.right-sidebar {
    position:relative;
    width:40% !important;
    background-color:lime;
    float:right;
    margin:0;
    padding:0;
}
.content {
    position :relative;
    width:60%;
    background-color:silver;
    margin:0;
    padding:0;
}
​

解决方法

这不是解决问题的浮点数.这是百分比宽度.在FF和IE中,它工作得很完美,但是Chrome会计算百分比宽度,因此并不总是像素总和达到100％.只是尝试轻微改变窗口宽度,你会注意到额外的1像素有时会消失/出现.

如何避免这种行为？你需要以某种方式使用相同的百分比,所以它的计算方法完全相同.右侧边栏宽度为40％,因此内容div需要有40％的右边距(这40％是包含块元素的40％)

http://jsfiddle.net/XPd9J/1/

.inner-wrapper {
    background-color:red;
    overflow:auto;
    width:90%;
    padding:0;
    margin:20px 0 0 20px;
}
.right-sidebar {
    width:40% !important;
    background-color:lime;
    float:right;
    margin:0;
    padding:0;
}
.content {
    background-color:silver;
    margin:0 40% 0 0;
    padding:0;
}
​