Сделайте общую ширину div одинаковой в режимах Strict и Quirks

Question

Рассмотрим следующее

<div style="width:150px;border:50px solid black">Test</div>

Если это выводится на страницу, которую IE8 отображает в строгом режиме (или если вы загружаете в Firefox и т. Д.), То внутренняя часть div (белая область, где находится test) будет иметь ширину 150px, но общий div будет 50 + 150 + 50 = 250 пикселей в ширину (с учетом границы)

Если это отображается в режиме Quirks, ширина будет только 50 + 50 + 50 = 150px.

Разница в причудах, ширина включает любую границу, как объяснено здесь

Если вы помещаете HTML-фрагмент на страницу и заранее не знаете, какой режим будет использоваться, есть ли надежные хаки (css / javascript или другие), которые гарантируют, что div имеет одинаковые общие размеры в оба режима Strict / Quirks во всех основных браузерах (IE6 / 7/8, Firefox, Opera, Chrome)?

Answer 1

Я думаю, что я его взломал (проверено на IE 6/7/8, причуды и строгий режим и FF3.5)

Режимы Quriks / Strict отличаются по ширине div, только если естьзадействованы padding / border.

Поэтому создайте внешний div для установки ширины, а затем внутренний div с границей.

Внутренний div ограничен шириной внешнего div - и оба причудливых / строгих режима будут иметь одинаковый размер.

то есть

<div style="width:150px;border:50px solid black">Test</div>

становится

<div style="width:150px;">
   <div style="border:50px solid black">Test</div>
</div>

Answer 2

Для этого есть атрибут box-sizing. См. это руководство .

Answer 3

Единственный надежный способ, который я могу придумать, - это пропустить несколько (или много) стилей CSS - границы для одного. Если вы будете придерживаться базовых принципов (например, div с фоновыми цветами) и не будете слишком много возиться с отступами и полями, вы сможете получить довольно стабильный результат.

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