Способ обхода
коробочной модели

Content

Ниже пример с div, имеющего класс "content".

Этот div почти идентичен с div "boxtest":

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

но имеет одно важное добавление. Добавилось еще одно правило, которое пользуется неполадкой в разборе CSS Internet Explorer 5/Windows и Internet Explorer 5.5/Windows, чтобы применить новую ширину, которая станет доминирующей.

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

Этот div (включая кромку) также должен равняться шириной с голубой линией в Internet Explorer 5/Windows и Internet Explorer 5.5/Windows.

Также, сразу после предыдущего правила, мы добавляем еще одно правило для помощи пользовательским агентам, поддерживающие селекторы (selectors) CSS2 и коробочную модель, но не имеющие ту же неполадку что и Internet Explorer 5.x/Windows. Я называю это правило "хороший тон для Opera 5 (be nice to Opera 5)". Убедитесь, что вокруг '>' нет пустого места.

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

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

Для демонстрации того, что пользовательские агенты продолжают разбор CSS файла с данного момента, я добавил еще одно правило сразу же после предыдущего.

p.ruletest { color: blue }

Этот параграф имеет class="ruletest" и поэтому должен быть голубого цвета. Если цвет красный, то предыдущее правило (которое должно было быть заменено последующим) используется не правильно. Заметьте, что последнее правило необязательно и находится здесь только для цели показа того, что способ обхода коробочной модели восстанавливает все после себя.

Дополнения

<?xml version="1.0"?>