Случайно столкнулся со странной багой в опере 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. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.
Метки: опера, азы css, азы верстки
Занятная бага, возьму на примету. Хоро?о, что не сталкивался, наверное, я «правильный» разработчик :)
А вообще, впечатления от браузеров ведь складываются не только со стороны разработчиков. У рядовых юзеров свои впечатления, и такие ?туки их мало волнуют.
по поводу впечатления — в день релиза 10-ой оперы на главной страницу была горизонтальная прокрутка на любом разре?ении. причина — заголовок был сдвинут вправо не марджином-паддингом, как принято, а позиционированием через relative и left:200px. неаккуратно и глупо, если честно. так, для общего впечатления неприятно)
Добавить два свойства для html, body:
float: left;
width: 100%;
попробую, но в общем, учитывая то, что написано в заметке — что это встречается только при написании CSS внутри страницы, а не при подключении вне?него файла, то в общем это ли?ние свойства =)