CSS Guru » опера http://starhack.ru Верстка сайтов, использование CSS, jQuery Sat, 12 May 2012 13:56:05 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Странная бага Оперы http://starhack.ru/strannaya-baga-opery/ http://starhack.ru/strannaya-baga-opery/#comments Thu, 08 Oct 2009 20:12:22 +0000 admin http://starhack.ru/?p=350 Случайно столкнулся со странной багой в опере 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, кроме определения минимальной высоты. ? только, повторюсь, ресайз позволяет опере правильно вычислить это значение.
Выводов два.

  1. Нефиг лениться. Трудно видите ли не переключиться на отдельный файл стилей.
  2. Да и неверно это в принципе писать стили в HEAD: растет размер страницы, стили не ке?ируются, если у вас боль?е, чем один ?аблон, то править стили придется в нескольких местах

В общем, если бы делал все, как положено, сэкономил бы себе пару часов времени: ни видел разницы в стилях, и это ставило в тупик.
P.S. При том, что опера замечательный браузер, вот такие вот простые ляпы сильно портят впечатление.

]]> http://starhack.ru/strannaya-baga-opery/feed/ 4