Исправление проблемы округления субпикселей в CSS Fluid Grid - PullRequest
Новая
       45

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

8 голосов
/ 09 марта 2012

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

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

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

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

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

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

Спасибо!

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

Ответы [ 2 ]

8 голосов
/ 11 сентября 2012

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

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

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

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

0 голосов
/ 15 мая 2013

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

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

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

...