оложим, вам нужно представить список цветов пользователю. Цвета должны отображаться в списке с фиксированной высотой, причем каждый цвет занимает равную долю этой высоты.

Вот как это должно выглядеть с четырьмя цветами, высотой списка 90 пикселей и толстой рамкой вокруг:

Изображение выше представлено в Firefox 3.6.13 из следующего источника:

<ul style="height: 90px; border: 5px solid black; padding: 0;">
    <li style="height: 25%; background: red;">
    <li style="height: 25%; background: blue;">
    <li style="height: 25%; background: yellow;">
    <li style="height: 25%; background: green;">
</ul>

Это все хорошо. Список действительно имеет высоту 90 пикселей - в пределах границ - и каждый цвет получает (на вид) равную долю этого пространства. Теперь давайте отрендерим тот же HTML / CSS в Safari или Chrome:

Обратите внимание на узкий белый ряд между зеленым рядом и границей. Существует довольно простое объяснение того, что мы видим здесь:0.25 × 90 = 22.5

WebKit в Safari и Chrome на самом деле не любит нецелую высоту пикселей и отбрасывает десятичную дробь. С четырьмя рядами высотой 22 мы получаем 2 пикселя ничего внизу списка:90 - 4 × 22 = 2

В контексте статического HTML-файла мы можем легко установить высоту элементов равной 23, 22, 23, 23 пикселя соответственно, и список будет отображаться в любом браузере. Если, с другой стороны, цвета загружаются из базы данных, и количество меняется в зависимости от каждого запроса, необходимо более гибкое решение.

Я знаю, как решить эту проблему, вычисляя и устанавливая высоту целочисленного значения в каждой строкеonload используя Javascript, и я опубликую это решение, если ничего не появится. Я, однако, предпочел бы чисто CSS-решение проблемы. Вы можете думать об одном?