Случайно столкнулся со странной багой в опере 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. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.
