html - 对 div 使用百分比

Question

我使用的是固定宽度的容器。在容器内，我有 2 个 div 向左浮动，第一个 div 的宽度为 9%，第二个 div 的宽度为 91%，但由于某种原因，在最右边出现了一条 1px 的白线。我该如何解决这个问题？在浏览器上缩放时有时会有所不同。

HTML:

<div id="main-container">

       <div id="container1">
       </div> 
       <div id="container2">
       </div>     

</div>

CSS:

#main-container {
    margin: 0 auto;
    margin-top: 45px;
    width: 1110px;
    height: 650px;
    border: 3px solid red;
    padding: 0px;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px; }

/*content*/

#container1 {
    float: left;
    width: 9%;
    height: 100%;
    border-radius: 7px 0px 0px 7px;
    -moz-border-radius: 7px 0px 0px 7px;
    -webkit-border-radius: 7px 0px 0px 7px;
    background: yellow; }

#container2 {
    float: left;
    width: 91%;
    height: 100%;
    border-radius: 0 7px 7px 0;
    -moz-border-radius: 0 7px 7px 0;
    -webkit-border-radius: 0 7px 7px 0;
    background: orange; }

demo

Answer 1

正如其他一些人提到的那样，问题似乎是由 WebKit 中的舍入差异引起的。

您可以将 float: right; 添加到第二个容器以修复对齐并消除间隙。 http://jsfiddle.net/Gw5AH/3/