在Firefox和Chrome中呈现HTML [英] Rendering of HTML in Firefox and Chrome

问题描述

 < div style =float：left; 
 height：20％; 
 width：70％;< / div> 
< div style =float：right; 
 height：20％; 
 width：30％;> < / DIV> 
  

在Chrome中，两个分部位于同一行。但是两个divs之间有一个小差距。但在Firefox中没有差距。为什么发生这种情况？任何解决方案？

解决方案

Chrome将所有宽度舍入为整数像素。除非你的容器宽度可以被10整除，这意味着浮动宽度将变成圆形，所以它们实际上不是它的30％和70％，因此它们之间可以有空间。

Gecko以分数像素进行布局计算，所以它可以更准确地表示宽度，并在绘制时刻捕捉到像素网格，避免这种类型的缝制。

您可能的解决方案是确保您的容器的宽度是10px的倍数，并向WebKit团队抱怨Round-to-integer-pixels行为。或两者兼而有之。

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

In Chrome the two divisions are in same line. But there is a small gap between the two divs. But in Firefox there is no gap. Why is this happening? Any solution for this?

解决方案

Chrome rounds all widths to integer pixels. Unless your container width is divisible by 10, this means that the float widths will get rounded so they're not actually 30 and 70 percent of it, and as a result there can be space between them.

Gecko does layout calculations in fractional pixels, so it can represent the widths much more exactly, and snap to the pixel grid at paint time, avoiding this sort of seaming.

Your possible solutions are to make sure your container has a width that's a multiple of 10px and to complain to the WebKit team about the round-to-integer-pixels behavior. Or both.

这篇关于在Firefox和Chrome中呈现HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！