Жидкостная сетка неправильно масштабируется

Question

У меня есть эта сетка жидкости с max-width 1280 пикселей.

Он состоит из пяти столбцов настройки - grid2, grid4, grid6, grid8 и grid10.

В целом и на первый взгляд это выглядит хорошо, но при проверке кода (проверено в Firefox и Google Chrome) самое маленькое пятно (grid2) на один пиксель меньше по высоте.

В max-width высота должна быть 320px как остальные пятна, но это всего 319px.

Я не могу заставить это работать должным образом.

Смотрите мою скрипку: http://jsfiddle.net/4ya94/

.grid2 {
    width: 18.72%;
}

Я надеюсь, что любой из вас может помочь \O/

Answer 1

Это связано с субпиксельным рендерингом.

Вы определили divширина s 1280px * 18.72%; который 239.616px

Соотношение ширина / высота 240px / 320px = 0.75

Так что высота будет 239.616px / 0.75 = 319.488px который затем округляется до 319px

Для вашей ссылки: согласно CSS 2.1 Спецификация в разделе 10.6.1

если 'height' имеет вычисленное значение 'auto', а элемент имеет внутреннее отношение, тогда используемое значение 'height' будет:

(used width) / (intrinsic ratio)