我使用的是固定宽度的容器。在容器内,我有 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; }
最佳答案
正如其他一些人提到的那样,问题似乎是由 WebKit 中的舍入差异引起的。
您可以将 float: right;
添加到第二个容器以修复对齐并消除间隙。 http://jsfiddle.net/Gw5AH/3/
关于html - 对 div 使用百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22597329/