铬浮子？1px额外填充,但它不填充

Question

以下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;
}
?

Answer 1

这不是解决问题的浮点数.这是百分比宽度.在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;
}
?

Answer 2

获得完整100%的另一个简单选项是将父元素设置为overflow:hidden您的元素width:101%.