Способ обЏДЇда
коробоЏЛЇой модели

Оригинал ЏзЬой страниЏЗю на английском ?зыке можн? просмотрет? по адресу: http://tantek.com/CSS/Examples/boxmodelhack.html

Если по???тс? вопрос? ил? предложени? по поводу перевода, то присЏЬЙайте их на hello@umade.ru.

Boxtest

Ниже пример ? div, имеюЏТОго клас? "boxtest".

Он имее? кромку ? 20px, внутренний отступ ? 30px ? ЏОНрину ? 300px.

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

?лн?? ЏОНрина, вклюЏКґЏнб?? кромку ? внутренний отступ, должна состав??ть 400px.

20+¤ї¤№30+¤ї¤№300+¤ї¤№30+¤ї¤№20 =¤п 400

?льзовательские агенты (user agents), неправилЏвЅ? интерпретируЏнбие коробоЏЛЇую модель ? CSS1, вставл?? кромку ? внутренний отступ внутрь заданной ЏОНрины, дела? полную ЏОНрину 300px, ? ЏОНрину содержимог? 200px.

300-¤Т¤Ї20-¤Т¤Ї30-¤Т¤Ї30-¤Т¤Ї20 =¤п 200

Красна? ? голуба? лини? предоставлен? дл? сравнени?. Этот div (вклюЏКґ? кромку) должен совпадат? ? голубо? линией по ЏОНрине.

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"?>