Рендеринг HTML в Firefox и Chrome - PullRequest
Новая
       23

Рендеринг HTML в Firefox и Chrome

4 голосов
/ 07 июля 2011 
<div style="float: left;
            height: 20%;
            width: 70%;"</div>
<div style="float: right;
            height: 20%;
            width: 30%;">         </div>

В Chrome два подразделения находятся в одной строке. Но между двумя делами есть небольшой разрыв. Но в Firefox нет пробела. Почему это происходит? Любое решение для этого?

1 Ответ

8 голосов
/ 08 июля 2011

Chrome округляет всю ширину до целых пикселей. Если ширина вашего контейнера не делится на 10, это означает, что ширины с плавающей точкой будут округлены, так что на самом деле они не равны 30 и 70 процентам, и в результате между ними может быть пространство.

Gecko выполняет расчеты макета в дробных пикселях, поэтому он может гораздо точнее представлять ширину и привязываться к пиксельной сетке во время рисования, избегая такого рода сшивания.

Ваши возможные решения - убедиться, что ваш контейнер имеет ширину, кратную 10px, и пожаловаться команде WebKit на поведение с округлением до целого числа пикселей. Или оба.

...