Box Model Hack
Публикувано на 2008-04-17 в категория Уеб дизайн.
« NextGEN Gallery на български | Subaru Impreza WRX STI 2008 »
Оригиналът на тази страница на английски език се намира на адрес:
http://tantek.com/CSS/Examples/boxmodelhack.html.
Boxtest
Това е обикновен div с клас "boxtest".
Той има рамка (border) 20px, отстояние (padding) 30px и ширина (width) 300px.
div.boxtest {
border:20px solid;
padding:30px;
background:#ffc;
width:300px;
}
Общата ширина, включваща рамката и отстоянието, би трябвало да е 400 пиксела.
20+30+300+30+20 = 400
Браузъри, които интерпретират грешно CSS1 box модела, поставяйки рамката и отстоянието вътре в оказаната ширина ще покажат като резултат обща ширина само 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 parsing bug в IE5/Windows и IE5.5/Windows и прилага ширината (width), преди по-късно отново да се презапише.
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
Този div (включително с рамката си) би трябвало да е широк, колкото синьото поле, дори при IE5/Windows и IE5.5/Windows.
В допълнение добавяме още едно правило веднага след по-горното, за да помогне на браузъри, които поддържат CSS2 селектори и CSS box модела, но страдат от същия бъг при парсване както IE5.x/Windows споменат по-горе. Авторът го нарича "be nice to Opera 5" правило. Убедете се, че не сте оставили празно място от двете страни на ‘>’.
html>body .content {
width:300px;
}
Най-накрая обърнете внимание на това, че браузърите страдащи от бъга при парсване, проявяващ се при "\"}\"" стойност, потенциално могат да игнорират въпросната дефиниция, така че "be nice to Opera 5" правилото служи да помогне за откриване на подобни агенти със странно поведение при парсването, още в контекста на самия стил (style sheet).
За демонстрация на това, че това CSS парсване е поправено във въпросния момент, е добавено още едно правило веднага след по-горното, за да изясни нагледно казаното досега.
p.ruletest { color: blue }
Този параграф има class="ruletest" и затова трябва да е оцветен в синьо. Ако е оцветен в червено означава, че по-ранното правило (което би трябвало да е предефинирано после) продължава да важи. Забележете, че последното правило не е необдимо и е добавено само за да покаже, че ефекта на по-горе описания box model hack е опстигнат и правилата след прилагането му са изчистени.
Приложение
Когато не е необходимо, избягвайте ?xml въведение в документа.
20020404 Prerit Bhakta пише, че ако използвате
?xml въведение:
<?xml version="1.0"?>
IE6/Windows използва quirky box модел (вграден стил по подразбиране).
Поради това, че ?xml пролога не е задължителен, авторът препоръчва да не се използва.
Валидирайте стиловете си като медия независими файлове.
20020903 Jonathan Horn пише, че W3C CSS валидатора намира грешка, когато ‘voice-family’ свойството се използва в ’screen’ style sheet.
Авторът е отбелязал в коментар към сайта mezzoblue на Dave Shea, че това е грешка на самия W3C CSS ваалидатор. Валидаторът трябва да рапортува предупреждение, а не грешка, когато се използват неподдържани от дефинираната медия свойства и това е докладвано на W3C:
- http://lists.w3.org/Archives/Public/www-validator-css/2001Jul/0086.html
- http://lists.w3.org/Archives/Public/www-validator-css/2001Oct/0070.html
Препоръка от автора: Валидирайте стила си като медия-независим файл за да сте сигурни, че използвате валиден CSS и тогава го импортирайте (@import) в медия-зависим елемент ако е необходимо.
Не забравяйте да се абонирате за RSS новини от блога ми.
online