Четыре узла шириной 25% не подходят друг к другу?

Question

У меня есть узел заголовка, в котором находятся четыре дочерних узла. Ни у кого нет границ, отступов или полей. Все четыре из них имеют ширину: 25%; Правило CSS. В Opera это работает просто отлично, в IE последний блок переходит на следующую строку, иногда в зависимости от ширины окна.

Я могу решить эту проблему, задав ширину одного блока 24,8%, но Opera интерпретирует это как 24% и, таким образом, оставляет широкий открытый разрыв в 1% в конце блоков.

Как я могу решить это? Было бы хорошо, чтобы последний блок пропустил пиксель справа.

Answer 1

http://ejohn.org/blog/sub-pixel-problems-in-css/

К сожалению, это известная проблема в мире CSS. Вероятно, проблема заключается в том, что 100% -ный пиксельный эквивалент, в который они помещаются, является нечетным числом, поэтому при вычислении пикселей возникает ошибка округления.

Обычно я решаю эту проблему, используя специфичный для IE селектор для. Роб предлагает таблицы стилей для конкретного браузера, но я всегда считал, что такое поведение трудно поддерживать, и для него требуется дополнительная загрузка HTTP из браузера. Я также ненавижу хаки CSS, но вы можете попробовать знаменитую #width: 24,9% после объявления правильной ширины (например, ширина: 25%; #width: 24,9%;). Надеемся, что если IE исправит этот хак в будущих версиях, это также приведет к проблеме с округлением.

Кроме того, если вы знаете ширину пикселя родительского элемента, вы можете просто убедиться, что он делится равномерно на 4. Но если это текучая компоновка, это не вариант.

Answer 2

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

total width: 800
25% width: 200
four 25% blocks: 800

total width: 799
25% width: 199.75
four side-by-side blocks: either 796 or 800

800 ширина против окна шириной 799 будет падать вниз.

Answer 3

Возможно, вы захотите просто загрузить другую таблицу стилей в зависимости от браузера. Вы можете сделать это с помощью некоторого JavaScript в заголовке.