1% потерян в Chrome

Question

Я строю 3 колонки с плавающими элементами.У меня есть контейнер с отступом 20 пикселей.Внутри контейнера у меня есть 1 блок полной ширины, за которым следуют 3 столбца, за которыми следует еще один блок полной ширины.Колонны плавают влево.ширина: 31%, маржа: 0 1%.Это добавляет до 99%;Блоки полной ширины имеют поля 0 2% 0 1%.Что также добавляет до 99%.

Mozilla и IE отрисовывают все отлично, но Chrome добавляет еще 1% к блокам полной ширины.Я не могу понять расчет.

Не могли бы вы взглянуть: schoolscout.co.uk .

Answer 1

Потому что разные движки рендеринга рассчитывают проценты к пикселям по-разному. Джон Ресиг (John Resig) дает хороший обзор в своей статье Проблемы с подпикселями в CSS .

Изображение, представленное там, показывает хороший пример того, что может пойти не так:

И Opera, и Safari [и другие браузеры на основе WebKit, MK] округляют ширину всех элементов div до 12px. Это оставляет разрыв в 2 пикселя (обратите внимание на зеленый) справа от всех элементов div. Если вы когда-нибудь задумывались, почему ваша хорошо выровненная навигация не заполняет все содержимое контейнера в этих браузерах, теперь вы знаете, почему. С положительной стороны, по крайней мере, вы знаете, что ширина этих контейнеров будет одинаковой, несмотря ни на что.

Глядя на вашу страницу, вот что я получаю:

<b>                 m     b     p     w     p     b     m   total</b>
<b>Chrome</b>
column_header    6     1     -   674     -     1    13     <b>695</b>
column           6     -     -   215     -     -     6     <b>227</b>
<b>Firefox</b>
column_header    6     1     -   673     -     1    13     <b>694</b>
column           6     -     -   216     -     -     6     <b>228</b>