Равномерно распределенная высота дочерних элементов с помощью CSS

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

Вот как это должно выглядеть с четырьмя цветами, высотой списка 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 пикселей - в пределах границ - и каждый цвет получает (по-видимому) равную долю этого пространства. А теперь давай s отображают тот же 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. Вы можете придумать такой?