Четыре узла шириной 25% не подходят друг к другу?
У меня есть узел заголовка, в котором находятся четыре дочерних узла. Ни у кого нет границ, отступов или полей. Все четыре имеют ширину: 25%; css правило. В Opera это работает нормально, в IE последний блок переключается на следующую строку, иногда в зависимости от ширины окна.
Я могу решить эту проблему, задав одному блоку 24,8% ширины, но Opera интерпретирует это как 24% и, таким образом, оставляет широкий открытый зазор в 1% в конце блоков.
Как я могу это решить? Было бы нормально, если бы последний блок пропустил пиксель справа.
Ответы 3
Возможно, вы захотите просто загрузить другую таблицу стилей в зависимости от браузера. Вы можете сделать это с помощью JavaScript в заголовке.
Это зависит от используемого алгоритма округления. Если у вас есть количество пикселей, равномерно делимое на 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 упадет.
Вся идея процентов - это плавные макеты. Таким образом, ограничение моей ширины сделало бы проценты излишними.
http://ejohn.org/blog/sub-pixel-problems-in-css/
К сожалению, это хорошо известная проблема в мире CSS. Вероятно, проблема в том, что 100% -ный эквивалент пикселей, в который они вписываются, является нечетным числом, поэтому при вычислении пикселей возникает ошибка округления.
Обычно я решаю эту проблему, используя специфичный для IE селектор для. Роб предлагает таблицы стилей для конкретного браузера, но я всегда считал, что такое поведение трудно поддерживать, и для этого требуется дополнительная HTTP-нагрузка от браузера. Я тоже ненавижу хаки CSS, но вы можете попробовать знаменитый #width: 24.9% после объявления правильной ширины (например, width: 25%; #width: 24.9%;). Надеюсь, что если IE исправит этот взлом в будущих версиях, это также вместе с проблемой округления.
Кроме того, если вы знаете ширину родительского элемента в пикселях, вы можете просто убедиться, что она делится без остатка на 4. Но если это гибкий макет, это не вариант.
Спасибо, я действительно нашел некоторые материалы, документирующие проблему. И похоже, что пока нет реальных решений для этого: s Кроме того, тот факт, что Opera игнорирует дробные проценты, еще больше усложняет задачу. Я люблю свою оперу, но это действительно отстой.
Я считаю печальной тенденцией то, что сайты начинают требовать JS для решения тривиальных задач. Я могу условно загрузить их без JS. Это действительно решение. Не лучший, но можно было бы сделать в крайнем случае.