Div не заполняет контейнер 100% пути при сжатии

Question

Предположим, что у вас есть 5 разделов. Один - это контейнер, а остальные четыре - дети. Вы установили, что каждый из них должен составлять 25% от контейнера, и вы предоставили каждому фон отдельно от фона контейнера.

Когда вы изменяете размер браузера, ваши 4 divs в какой-то момент времени не проходят полностью, они могут быть на пару пикселей. Есть ли способ остановить эту форму? Я предполагаю, что это происходит, потому что это «привязка к каждому пикселю», поэтому оставляя небольшой пробел при изменении размера браузера.

#container { 
    width: 100%; 
    background: #000; 
} 
.children { 
    width: 25%; 
    float: left; 
    background: #fff; 
} 

JSFiddle: http://jsfiddle.net/AEvUL/

Скриншот страницы JSFiddle в сафари: http://cl.ly/image/1o1O2O401E0f

Answer 1

Резиг имеет пост об этой проблеме, которая использует именно этот случай в качестве своего примера.

http://ejohn.org/blog/sub-pixel-problems-in-css/

Возьмите одну страницу, например. У вас есть 4 плавающих divs, каждый с шириной 25%, содержащийся в родительском div шириной 50 пикселей. Вот вопрос: насколько широки каждый из разделов?

Проблема заключается в том, что каждый div должен быть примерно 12,5px в ширину, и поскольку технология не находится на уровне, на котором мы можем начать рендеринг на уровне субпикселя, мы, как правило, должны округлять номер. Затем возникает проблема: в каком виде вы можете округлить число? Вверх, вниз или смесь двух? Я думаю, что результаты удивят вас, поскольку они сделали меня.

Есть также несколько Stack Overflow вопросы по теме:

• safari rounding down on subpixel calculations
• percent (%) width rendered differently in different browser (firefox, safari, opera, chrome)