Что такое блочная модель IE?

Question

Что такое блочная модель IE, которую я так часто вижу в интернет-уроках? Но я никогда не мог понять это ясно.

Answer 1

В IE 5.5 и более ранних версиях, а также в более поздних версиях IE, которые выполняют рендеринг в режиме Quirks, padding помещается внутри содержимого width, а не вокруг него.

В наши дни, просто используйте стандартный режим запуска Doctype и не беспокойтесь об этом.

Answer 2

Таким образом, в браузерах, соответствующих стандартам, блочная модель относится к тому, как браузер вычисляет общую ширину элемента.

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

<div id="zoidberg" style="width: 100px;"></div>

В настоящее время как в IE, так и в браузерах, соответствующих стандартам, общая ширина составляет 100 пикселей. Допустим, вы добавили левое и правое поле размером 10 пикселей в поле:

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px;"></div>

Прямо сейчас в браузерах, соответствующих IE и стандартам, общая ширина составляет 120 пикселей (ширина 100 пикселей плюс 10 пикселей поля слева). Все идет нормально. Это где вещи начинают становиться фанки. Давайте добавим границу к этому скучному div:

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid"></div>

Так что теперь у нас есть потрясающий div с рамкой. К сожалению, из-за того, что IE не соответствует стандартам, общая ширина в IE и совместимых со стандартами браузерах отличаются. С этого момента общая ширина IE будет составлять 120 пикселей (ширина 100 пикселей, плюс 10 пикселей поля слева и справа). Однако ширина div в браузерах, соответствующих стандартам, будет составлять 122 пикселя (100 пикселов в ширину, 20 пикселов поля и 2 пикселя границы [1 пиксель с левой стороны и один 1 пиксель с правой стороны границы). ) Вы начинаете видеть, что проблема развивается?

Эй, наш div выглядит странно, текст касается границы. Давайте добавим немного отступов к нему:

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid; padding-left: 10px; padding-right: 10pxl"></div>

Круто, теперь выглядит намного лучше. Опять же, общая ширина в IE составляет 120 (ширина 100 пикселей плюс 20 пикселей поля). Однако в совместимых со стандартами браузерах общая ширина блока теперь рассчитывается как 142 пикселя (100 пикселей ширины, 20 пикселей поля, 2 пикселя границы и 20 пикселей отступа [10 пикселей справа, 10 пикселей) на левой стороне.])

Итак, чтобы ответить на ваш вопрос, блочная модель IE - это то, как IE вычисляет общую ширину элемента. Он игнорирует границы и отступы и учитывает только поля и ширину. Браузеры, соответствующие стандартам, рассчитывают общую ширину, добавляя ширину, поля, границы и отступы элемента. Лично в IE метод way имеет больше смысла, но это не тот стандарт, поэтому мы должны ворчать.

Answer 3

http://www.google.com/search?hl=en&safe=off&client=firefox-a&hs=Ro2&rls=org.mozilla%3Aen-US%3Aofficial&q=IE+Box+Model+Hack&aq=f&aqi=&aql=&oq=&gs_rfai=

Answer 4

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