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

StackOverflow https://stackoverflow.com/questions/2120273

  •  22-09-2019
  •  | 
  •  

Вопрос

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

<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 с цветом фона) и не слишком сильно возитесь с отступами и полями, вы сможете получить довольно стабильный результат.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top