Трюк с блочной моделью CSS

Добавлено 03.09.2007 | CSS


Boxtest

Вот типичный <div> блок, которому присвоен класс "boxtest".

Блок имеет границу в 20 px , отступ в 30 px и ширину в 300 px.

div.boxtest { 
  border:20px solid;
  padding:30px;
  background: #ffc;
  width:300px;
}

Общая ширина блока, включая все границы и отступы, должна составлять 400px.

20+30+300+30+20 = 400

Браузеры, неверно интерпретирующие блочную модель из спецификации CSS1, поместят отступы и границы внутри заданного интервала ширины, в результате общая ширина нашего блока будет равна всего лишь 300 px, а ширина содержимого - лишь 200 px.

300-20-30-30-20 = 200

Для наглядности ниже даны две полосы - красная и синяя. Наш блок (включая границы) должен быть равен синей полосе по ширине.

 
 

Content

А вот <div> блок с классом "content".

Его стилевое описание почти полностью повторяет таковое для предыдущего блока:

div.content { 
  border:20px solid;
  padding:30px;
  background: #ffc;
}

с одним важным добавлением. Добавлено ещё одно стилевое правило, использующее известный баг в разборе CSS, присущий IE версий 5.0 и 5.5 (для Windows). Оно задает размер по ширине, а затем переопределяет этот размер.

div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

Этот <div> блок (включая границы) должен быть такой же длины, как и синяя полоса, даже если вы смотрите на него в IE версии 5.0 или 5.5 (для Windows).

Кроме того, сразу за ним мы добавили ещё одно стилевое правило для браузеров, которые поддерживают селекторы из CSS2 и блоковую модель, но имеют ту же описанную выше проблему разбора CSS, что и упомянутые выше IE версии 5.x/Windows. Я назвал это правило "реверанс для пятой Оперы". Не забудьте, что символ ">" надо писать впритык к соседним (без пробелов).

html>body .content {
  width:300px;
}

Наконец, заметьте, что браузеры, которые ошибочно разбирают конструкцию "\"} \ " ", вполне могут проигнорировать следующее правило, так что "примочка для пятой Оперы" служит для того, чтобы помочь этим бедолагам "сообразить", где продолжается таблица стилей.

Для лучшего понимания того, что браузеры на этой строчке вновь начинают нормально понимать CSS, я добавил ещё одно правило:

p.ruletest { color: blue }

Этому абзацу присвоен класс "ruletest" и потому цвет текста должен быть синим. Если же текст окрашен красным, то это значит, что предыдущее правило (которое должно быть отменено последующим) все-таки работает.

Запомните, что предыдущее правило (окраска в синий цвет) не является необходимым - его основная задача - иллюстрирование преимуществ приведённого выше трюка с отображением блока.

Приложения

?xml-декларация не является обязательной

Прерит Бхакта заметил, что если включить в начало документа декларацию… 

<?xml version="1.0"?>

… то IE6 для Windows будет строить блоковую модель в "странном" режиме.

Так как , то я рекомендую просто не использовать её.

Tantek Celik