главная : :
CSS: вопросы и ответы

Здесь приведены некоторые странности или нелогичности браузеров и способы их разрешения в CSS.

MS Internet Explorer

Min-width

Это свойство IE понимает как width. Зато работает следующая конструкция:

#wrapper {width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 780)? "780px" : "100%")}

Валидатор на эту конструкцию ругается, поэтому можно перенести ее в HTML:

IE5 с первой загрузки страницы не знает, чему равно clientWidth , поэтому нужно просто обратиться к этой величине в <head>:
<script language="JavaScript" type="text/javascript"></script>

В IE5 картинка не хочет "прилипать" к краю блока

Хотя указаны margin: 0; padding: 0.
Попробуйте выставить ей свойства vspase или hspace: <img src="url" vspace="0" hspace="0">

В IE блок нулевой ширины(высоты) остается ненулевой ширины (высоты)

Блок нулевой высоты (ширины) этот браузер понимает только тогда, когда блок плавающий: line-height не помогает.
Попробуйте указать ему float: left (right).

Хак для IE

Самый лучший хак - это условные комментарии (в связи с тем, что IE7 обещает не поддерживать никаких других хаков).

Например, в заголовок <head> документа вписывается строка:

<!--[if gt IE 5]>
<link href="/include/ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Все браузеры, кроме IE, считают это комментарием, а IE анализирует.
Условный комментарий можно вставлять в любое место документа.
Операции сравнения: gt (больше), gte (больше или равно), lt, lte. В случае равенства символ опускается.

INPUT {height: 16px}     /*это понимает IE6 */
html>body INPUT {height: 20px}  /*это - все остальные браузеры*/

Еще пример: два блока расположены рядом имеют свойство float: left;
Отступ первого от края margin-left: 20px; второго от первого - margin-left: 10px ;
В IE отступ второго блока от первого в результате получается 30px. Т.е. имеет место суммирование.

Хак для IE5

Особенность IE5 в том, что ширина блока складывается из собственно ширины, отступов и границ, в остальных браузерах - только собственно ширина (см. также тут и тут )
#menu {width: 150px; voice-family: "\"}\""; voice-family: inherit; width: 140px} html>body #menu {width: 140px}
150px - это только для IE5, после voice-family он уже не понимает ничего.
Вторая строка нужна, чтобы вернуть IE5 к жизни: без нее следующая за первой строка будет игнорироваться.

Если хочется поставить несколько IE на одном компьютере,
см. сюда .

Хак для Оперы

Пока работает (04.06.2009):

@media all and (min-width: 0px) {
   .class_name {margin-top: 2px}
}

..еще про хаки..

Плавающая модель

Общее правило: если Вы используете плавающую модель, все внешние блоки должны быть плавающие, даже если необходимости в этом нет.

Поэтому абсолютно позиционированные блоки в IE не всегда показываются. Они показываются, только если им "освободить место". Или внутри другого блока.

В стилях для печати от плавающей модели лучше избавиться.

Плавающий блок "приплывает" не туда, хотя указано clear: both

Возможно, у тех блоков, что должны быть выше, слишком маленькая ширина, и этот блок их не "замечает".
(Точнее: сумма ширин неприкаянного блока и того, что должен быть выше его, - меньше ширины экрана.)
Помогает вставить перед ним еще блок:
<div class= "clearing"></div> .clearing {width: 100%; height: 0; clear: both}
Вообще вставка такого блока помогает часто в самых разных ситуациях.

Если блок (таблица) шириной 100% уходит куда-то вниз

Возможно, там стоит распорка шириной в 1px. Этот 1px в 100% не входит.
Помогает поставить ширину 99%. Или сделать ширину распорки 0px. Правда, в последнем варианте Mozilla распорку видеть не будет.

Мелочи

Блок в середине окна браузера

BODY {text-align: center}   // после этого блок стоит в середине для IE5
#block {text-align: left; width: 780px; margin: 0px auto}   // последнее - для остальных браузеров

ширину блока можно указать и в процентах.