Исправление баговой модели IE Box
Это, пожалуй, самая распространенная и неприятная ошибка в IE 6 и ниже. Это вызвано тем, что IE используют другой подход при расчете общего размера коробки. Допустим, вы пишете
.box {
width:100px;
padding:10px;
border:2px solid #CCC;
}
В соответствии со спецификациями W3C общая ширина поля должна составлять 124 пикселя, что соответствует всем современным браузерам, в то время как IE рассчитывает его только как 100 пикселей.
Это отклонение от спецификации может вызвать много проблем с макетом. IE 6 действительно может сделать это правильно, если вы находитесь в режиме соответствия стандартам. Существуют различные обходные пути для этой проблемы. Вот некоторые из них:
BOX-IN-A-BOX
Согласно этой методике, мы просто используем дополнительную разметку, чтобы исправить проблему. Вместо того, чтобы использовать заполнение для основного элемента, мы вставляем в него другой элемент и используем для него заполнение. Как
<div class=”box”>
<div class=”box-inner”>
Testing for box model hack
</div>
</div>
В этом случае наша разметка будет
.box { width:100px;}
.box-inner {padding:10px;}
МОДЕЛЬ ПРОСТОЙ КОРОБКИ (SBMH)
Для решения проблемы используется ошибка синтаксического анализа CSS в Internet Explorer. Это было впервые подробно описано Эндрю Кловером
Структура этого хака
.box {
padding:20px;
width: 100px;
\width: 140px;
w\idth: 100px;
}
Первая строка width: 100px;
предназначена для браузеров, таких как Mozilla и Opera, которые правильно отображают. Opera и другие браузеры подавляют escape-символ (\
) и игнорируют второе и третье свойства. Второе свойство \width: 140px;
предназначено для режима IE 5 и 6 / quirks. Последняя строка w\idth: 100px;
будет прочитана дружественными браузерами (в том числе IE 6 в режиме non-quirks) и вернется к ширине 100px.
BOX-РАЗМЕР
Недавно появившееся свойство CSS3 box-sizing позволяет вам выбрать, какую блочную модель должен использовать ваш браузер. Блочная модель W3C называется content-box
, а блочная модель Internet Explorer называется border-box
.
Это может упростить управление размером элементов и заставить размеры вести себя одинаково в разных браузерах.
.box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Если веб-сайт отображается в режиме причуд, IE6 будет отображаться с использованием нестандартной блочной модели, поэтому он будет отображаться так, как если бы у него было свойство border-box
. Современные браузеры примут это багги-модель IE, установив это свойство.
Надеюсь, это поможет ...