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

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

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

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

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

после обширных чтений о проблеме я понял, что " нет права или неправильное решение" для округления субпикселей, но путь Firefox кажется мне лучшим компромиссом. (Например, если я установил 4 divs шириной 25%, я ожидаю, что охватываемая область будет 100%.)

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

спасибо!

обновление: по состоянию на май 2014 года Chrome 33 и Safari 7, похоже, подобрали "путь Firefox".

8
css fluid javascript rounding subpixel

2 ответов

модуль сеток OOCSS framework Stubbornella (ссылки ниже) занимается этим, предоставляя последнему столбцу следующие переопределения:

float:    none;
overflow: hidden;
width:    auto;

Это позволяет ему занимать любую ширину, оставшуюся в контейнере.

немного разветвления браузера (т. е. ptzsch...) необходимо получить такое же поведение: https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids

8

это отстой, для этого нет хорошего варианта, который будет округлять пиксели вверх и вниз для каждого браузера, но вместо этого я обычно делаю:

.nested:last-child {
    float: right;
}
.nested:first-child {
    float: left;
}

это будет плавать последний дочерний элемент вправо, поэтому несоосность px не очевидна, но если это единственный элемент (скажем, div, который имеет ширину 33%), то он будет продолжать плавать влево.

0