Случайно столкнулся со странной багой в опере 9.64 и 10. Есть простой всем известный способ растянуть сайт на всю высоту окна браузера:
CSS
html, body {
background:#fff;
border:0;
height:100%; /*trick*/
margin:0;
padding:0;
}
.wrap {
background:red;/* для контраста*/
min-height:100%;
_height:100%;/* ie6 underscore hack*/
margin:0 auto;/* расположим блок посередине экрана */
width:90%;/*необязательно*/
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Странная бага оперы</title>
<link href="minheightbug.css" media="screen" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">немного текста для теста.
Странная бага оперы с определением высоты блока</div>
</body>
</html>
? вариант со стилями в самом .HTML файле, прописанными в HEAD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Странная бага оперы</title>
<style type="text/css">
html, body {
background:#fff;
height:100%;
margin:0;
padding:0;
}
.wrap {
background:red;
min-height:100%;
margin:0 auto;
width:90%;
}
</style type="text/css">
</head>
<body>
<div class="wrap">немного текста для теста.
Странная бага оперы с определением высоты блока</div>
</body>
</html>
(DOCTYPE не важно какой)
Простой общеизвестный способ. Но...
?грался как-то с разметкой (чуть позже распи?у с какой). Создал html-файл и начал писать стили в HEAD, для скорости и чтоб не делать ли?них телодвижений (еще один файл, переключаться из HTML в CSS). Начал тестить: ФФ — гут, Хром — гут, Сафари (вин) — гут, ?Е (о чудо) — гут. ? тут черед до?ёл до оперы…
? я увидел, что блок WRAP не растягивается на всю высоту окна. Отресайзи?ь окно — растягивает. Обнови?ь — опять WRAP по высоте на свой контент.
Странная бага оперы
то же самое после ресайза окна в опере
Ре?ил посмотреть предыдущую работу, в которой использован этот же способ. Опера все показывает правильно. Одна разница: там стили подключены вне?ним файлом через LINK. Я в недоумении. Опера правильно применила все стили, прописанные в HEAD, кроме определения минимальной высоты. ? только, повторюсь, ресайз позволяет опере правильно вычислить это значение.
Выводов два.
- Нефиг лениться. Трудно видите ли не переключиться на отдельный файл стилей.
- Да и неверно это в принципе писать стили в
HEAD: растет размер страницы, стили не ке?ируются, если у вас боль?е, чем один ?аблон, то править стили придется в нескольких местах
В общем, если бы делал все, как положено, сэкономил бы себе пару часов времени: ни видел разницы в стилях, и это ставило в тупик.
P.S. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.
