在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团队抱怨圆到整数像素的行为。或两者兼而有之。