<style type="text/css" media="all">
.text {
border: 1px solid #999;
background-color: #F2F2F2;
padding: 9px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
width: 100%;
}
</style>
<input type="text" style="text" value="100% по ширине"/>
в современных браузерах (Firefox, Opera, IE6) не работает. А не работает потому, что в дело вступает блочная модель.
Блочные модели
Блочная модель браузера определяет как будет вычисляться размеры блочного элемента - с учетом отступов и бордюров (традиционная блочная модель) или без них, то есть по размеру контента (блочная модель W3C). Чтобы было понятней взгляните на Рис. 1.
Рис. 1. Различия традиционной и W3C блоных моделей.
Все современные браузеры придерживаются модели W3C. Соответсвенно ширина элемента (от одного края бордюра до другого) для которого задано width: 100% будет равен ширине родительского контейнера плюс ширина бордюра и отступов элемента, то есть больше чем нам нужно.
Если бы мы делали сайт для ABC, то ничего страшного. Но мы-то хотим делать нормальные сайты. А значит проблему надо решать.
Эту проблему можно обойти переключившись на традиционную блочную модель.
Переключение блочных моделей
В спецификации CSS3 для переключения блочной модели описан следующий синтаксис:
box-sizing: border-box
box-sizing: content-box
Первое определение соотвествует традиционной блочной модели, второе - блочной модели W3C. Такой синтаксис поддерживается Opera.
Примечание: box-sizing не работает в комбинации с min-width, max-width, min-height, max-height.
В Firefox поддерживается несколько иной вариант определений:
-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;
Первые два определения аналогичны указаным в спецификации CSS3. Третье определение задает блочную модель при которой размер элемента определяется по контенту и отступам (padding).
Для того чтобы переключить блочную модель в IE6 нужно переключить браузер в quirks mode. В этом особом режиме работы браузера (в отличии от strict mode) поддерживаются некоторые ошибки более ранних версий, и в частности традиционная блочная модель. В IE6 есть правило: если doctype переключающиму браузер в strict mode предшествует xml-пролог, то страница отображается в quirks mode. Это правило позволяет создавать валидные (касаемо doctype) страницы оставаясь при этом в quirks mode. Итак "волшебный" xml-пролог, который должен быть помещен в первую строку документа перед doctype имеет вид:
<?xml version="1.0" encoding="windows-1251"?>
Примечание: Это правило не поддерживается IE7.
Окончательное решение
Объединив подходы к переключению болных моделей мы получили окончательное решение, которое работает в Firefox, Opera и IE6.
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>100% по ширине</title>
<style type="text/css" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFF;
padding: 20px 50px;
color: #000;
}
h1 {
font-size: 24px;
}
.text {
border: 1px solid #999;
background-color: #F2F2F2;
padding: 9px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.width100 {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
}
</style>
</head>
<body>
<h1>100% по ширине</h1>
<input type="text" class="text width100" value="100% по ширине"/>
</body>
</html>
Источники:
Box model tweaking
http://www.quirksmode.org/css/box.html
Quirks mode and strict mode
http://www.quirksmode.org/css/quirksmode.html
Спецификации CSS3
http://www.w3.org/TR/css3-ui/
Комментариев нет:
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.