html - 对div使用百分比

我正在使用固定宽度的容器。在容器内，我向左浮动了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

最佳答案

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

您可以在第二个容器中添加float: right;以固定对齐方式并消除间隙。 http://jsfiddle.net/Gw5AH/3/