Неправильное отображение min-height в Internet Explorer 6
При верстке сайтов встречается много неожиданностей. Это обусловлено тем, что разные браузеры по разному отображают некоторые элементы разметки. На данный момент Windows XP является одной из самых популярных операционных систем. Так как в поставке с Windows XP идет браузер Internet Explorer 6, то этот браузер следовательно является наиболее используемым. К сожалению, оптимизация сайта под IE6 не всегда очень простое дело, так как в нем многое не поддерживается, или поддерживается частично. В данной статье я расскажу об одной из проблем, связанной с отображением разметки в IE6.
Часто встречается ситуация, когда часть сайта, в смысле располажения элементов в браузере, в которой отображается основной контент, должна иметь высоту не уже заданного размера. То есть если высота контента небольшая, то сайт имеет фиксированную высоту. Если же контент больше фиксированной высоты, то сайт растягивается.
Казалось бы, в чем проблема? Есть элемент CSS min-height. Посмотрим, что получится.
wrongpage.css:
#page
{
width: 200px;
background-color: Yellow;
min-height: 400px;
}
WrongMinHeight.htm:
<!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>
<title>Wrong Min Height Page</title>
<link href="wrongpage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
1
<br />
2
<br />
3
<br />
4
<br />
5
<br />
6
<br />
7
<br />
8
<br />
9
<br />
10
</div>
</body>
</html>
Теперь посмотрим отображение в Firefox или Internet Explorer версии выше 6 WrongMinHeight.htm
И посмотрим в IE6 WrongMinHeight.htm
Как видно в IE6 высота div выравнивается под высоту контента. А нужно чтобы она была фиксированного размера.
Что же делать? Выход есть. Изменим CSS следующим образом:
rightpage.css:
#page
{
width: 200px;
background-color: Red;
min-height: 400px;
height: auto !important;
height: 400px;
}
RightMinHeight.htm:
<!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>
<title>Right Min Height Page</title>
<link href="rightpage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
1
<br />
2
<br />
3
<br />
4
<br />
5
<br />
6
<br />
7
<br />
8
<br />
9
<br />
10
</div>
</body>
</html>
Посмотрим отображение в Firefox или Internet Explorer версии выше 6 RightMinHeight.htm
И посмотрим в IE6 RightMinHeight.htm
Вот теперь все отображается корректно!
Donkey-schon
09.09.2009 17:24
20