Сделайте общую ширину div одинаковой как в режиме Strict, так и в режиме Quirks.
Вопрос
Рассмотрим следующее
<div style="width:150px;border:50px solid black">Test</div>
Если это выводится на страницу, которую IE8 отображает в строгом режиме (или если вы загружаете Firefox и т. д.), то внутренняя часть div (белая область, где находится тест) будет иметь ширину 150 пикселей, но общий размер div будет 50 + 150. + 50 = ширина 250 пикселей (с учетом границы)
Если это отображается в режиме Quirks, то его ширина будет всего 50 + 50 + 50 = 150 пикселей.
Разница в том, что в Quirks ширина включает в себя любую границу, как описано. здесь
Если вы помещаете html-фрагмент на страницу и не знаете заранее, какой режим будет использоваться, есть ли какие-либо надежные хаки (css/javascript или другие), которые гарантируют, что div будет иметь одинаковые общие размеры как в Strict/ Режим совместимости во всех основных браузерах (IE6/7/8, Firefox, Opera, Chrome)?
Решение
Я думаю, что он взломан (проверено на причудах IE 6/7/8, строгом режиме и FF3.5)
Режим Quriks/Strict различается по ширине div только в том случае, если есть отступы/границы.
Итак, создайте внешний div, чтобы установить ширину, а затем внутренний div с границей.
Внутренний div ограничен шириной внешнего div - и оба режима quirks/strict будут отображать одинаковый размер.
то есть
<div style="width:150px;border:50px solid black">Test</div>
становится
<div style="width:150px;">
<div style="border:50px solid black">Test</div>
</div>
Другие советы
Вот что box-sizing
атрибут существует для.Видеть это руководство.
Единственный надежный способ, который я могу придумать, — это пропустить несколько (или много) стилей CSS, в том числе границы.Если вы придерживаетесь основ (например, элементов div с цветом фона) и не слишком сильно возитесь с отступами и полями, вы сможете получить довольно стабильный результат.
Кстати, уже довольно сложно заставить браузеры прийти к согласию относительно того, как все выглядит в одном типе документа, даже строгом.