在Firefox和Chrome中呈现HTML

Question

<div style="float: left;
            height: 20%;
            width: 70%;"</div>
<div style="float: right;
            height: 20%;
            width: 30%;">         </div>

在Chrome中,这两个部门在同一行.但两个div之间存在一个小差距.但在Firefox中没有差距.为什么会这样？对此有何解决方案？

Answer 1

Chrome将所有宽度舍入为整数像素.除非您的容器宽度可被10整除,否则这意味着浮动宽度将变为圆形,因此它们实际上不是它的30%和70%,因此它们之间可能存在空间.

Gecko以小数像素进行布局计算,因此它可以更精确地表示宽度,并在绘制时捕捉到像素网格,从而避免这种接缝.

您可能的解决方案是确保容器的宽度是10px的倍数,并向WebKit团队抱怨圆形到整数像素的行为.或两者.