google-chrome - 在 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 团队抱怨圆形到整数像素的行为。或两者。