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" и потому цвет текста должен быть синим. Если же текст окрашен красным, то это значит, что предыдущее правило (которое должно быть отменено последующим) все-таки работает.
Запомните, что предыдущее правило (окраска в синий цвет) не является необходимым - его основная задача - иллюстрирование преимуществ приведённого выше трюка с отображением блока.
