Устранение проблемы округления субпикселей в CSS Fluid Grid

Я пытаюсь создать плавную сетку CSS, она работает в Firefox и IE8+, но НЕ в Safari/Chrome/Opera где становится видна проблема округления субпикселей:

http://jsfiddle.net/bJKQ6/2/

.column {
  float: left;
  width: 25%;
}

Основной контейнер имеет ширину 100%, и если вы измените размер браузера в Safari/Chrome/ Opera вы можете видеть, как округленные ширины непоследовательны.

После подробного изучения проблемы я понял, что «нет правильного или неправильного решения» для округления субпикселей, но способ Firefox кажется мне лучшим компромиссом. (Например, если я установлю 4 элемента div шириной 25 %, я ожидаю, что покрываемая область будет равна 100 %.)

Я хотел бы знать, есть ли решение, основанное только на CSS, которое я пропустил, или, в качестве альтернативы, какой-нибудь JavaScript для решать проблему.

Спасибо!

ОБНОВЛЕНИЕ: по состоянию на май 2014 года Chrome 33 и Safari 7, похоже, переняли «путь Firefox».

8
задан gyo 9 July 2015 в 12:26
поделиться