Xiper

Проблемы с размерами блоков

Автор: Евгений Рыжков Дата публикации:

Проблема

В IE6 блок имеет не такие размеры как в других браузерах при равном значении width (height). Эта осообенность наблюдается в режиме обратной совместимости.

Теория

Модель вычисления ширины (высоты) блока согласно стандартам консорциума W3C является суммой width (height), padding и border.

Блочная модель по стандартамПо стандартам width — ширина содержимого блока Блочная модель в ИЕ6В ИЕ6 width — ширина всего блока

css код для браузеров, поддерживающих стандарты

.block {
width: 200px; /* ширина содержимого */
height: 200px; /* высота содержимого */
padding-left: 20px; /* отступы внутри блока */
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
border-left: 20px; /* бордюры */
border-right: 20px;
border-top: 20px;
border-bottom: 20px;
}

Итого ширина и высота блока составит
width+padding-left+padding-right+border-left+border-right=200+20+20+20+20=280px.
Высота вычисляется аналогично.

В IE6 ширина вычисляется иначе — это ширина всего блока. Поэтому width и height должны быть равными 280px.

Решение

Для IE6 задаем отдельно размеры блоков:

.block {
width: 200px; /* ширина блока */
height: 200px; /* высота блока */
padding-left: 20px; /* отступы внутри блока */
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
border-left: 20px; /* бордюры */
border-right: 20px;
border-top: 20px;
border-bottom: 20px;
}
* html .block {
/* хак для IE6 */
width: 280px; /* ширина блока для IE6 */
height: 280px; /* высота блока для IE6 */
}

Или значения для IE6 можно вынести в отдельный CSS файл.