Странная бага Оперы

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

Небольшое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной шириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как лучше все сделать проскользнул совет:

Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для ИЕ)
button {padding: 2px 1px !important}

Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в Интернет Експлорере.

Поясню в чем дело. Интернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:

лишние отступы в кнопках в браузерах Интернет Експлорер 5-7
лишние отступы в кнопках в браузерах Интернет Експлорер 5-7

Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:

отступы в кнопках в файрфоксе
отступы в кнопках в файрфоксе

Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.

И что же делать? Как привести в чувство этот загадочный ИЕ? Читать далее

Есть у ИЕ6 такая особенность: если какому-либо блоку задать ширину, то ИЕ6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то ИЕ6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).

Читать далее

Вендорные префиксы

Это приставки (префиксы), используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств. Приведу список некоторых префиксов для наиболее распространенных браузеров.

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузеров из семейства Mozilla
  • -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
  • -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
  • -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
  • и закончу префиксом -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

Использовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство text-overflow Opera не поймет, если не написать его таким образом: -o-text-overflow . А CSS-фильтры от Microsoft можно использовать в IЕ8 следующим образом: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)". Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге

Как расположить блок посередине?

Простой вопрос, но который регулярно задают: как выровнять блочный элемент (div или table, в зависимости от того, что вы используете в качестве контейнера) посередине экрана?
Ответ как всегда прост донельзя:

  • Если вы работаете в режиме поддержки стандартов и не рассматриваете браузеры, старше IЕ6, то достаточно написать блоку свойство margin: 0 auto.
  • Если же вы верстаете в quirks mode или  в требованиях в верстке есть поддержке IЕ 5, то вам придется для родительского, относительно вашего искомого контейнера добавить свойство text-align: center

Читать далее Как расположить блок посередине?