<...">
Geek Answers Handbook

Rendering HTML in Firefox and Chrome

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

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

+4
source share
1 answer

Chrome rounds all widths to whole pixels. If your container width is not divisible by 10, this means that the width of the float will be rounded, so in reality it is not 30 and 70 percent, but as a result there may be space between them.

Gecko calculates the layout in fractional pixels, so it can represent the width much more accurately and snap to the pixel grid while drawing, avoiding this kind of stitching.

Your possible solutions are to make sure your container has a width of 10px and complain to the WebKit team about the behavior from rounded to integer pixels. Or both.

+8
source

More articles:


All Articles