Частые вопросы о CSS

Подборка примеров и ссылок по CSS. Список вопросов составлен на основе поисковых запросов.

* position:fixed в ie61
* прибивание футера2
* clear у блока float3
* скругление углов css4
* условные комментарии в css5

position:fixed в ie6

В iE6 position:fixed не работает, но если очень нужно, то заменить его можно с помощью position: absolute и expression вычисляющего положение элемента в зависимости от положения скрола.

#fixed-block {
position: fixed;
right: 2em;
top: 100px;
background: wheat;
padding: 1.5em 1.5em 1.5em 3em;
width: 15em;
}

* html {
background: fixed url('null.png');
}

* html #fixed-block {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) + 100 + 'px');
}

пример6

Подробная статья про Полноценный fixed в MSIE7 есть в Техногрете, но обратите внимание, что в Standards Mode используется document.documentElement, а в Quirks Mode document.body.
прибивание футера

HTML

CSS

html {
height: 100%;
}

body {
min-height: 100%;
}

* html body {
height: 100%; /* замена min-height:100% для IE6 */
}

body {
position: relative; /* абсолютно позиционируемые элементы
будут располагаться относительно body */
}

#content {
padding-bottom: 7em; /* место для футера */
}

#footer {
position: absolute;
bottom: 0;
height: 7em;
width: 100%;
background: wheat;
}

пример8

Не работает в IE5. В IE6 футер не уходит на свое место, если размер страницы изменяется в результате работы JavaScript, например, если скрыты или добавлены некоторые элементы страницы.

Дополнено: В Opera 9.51 работает только если css подключен внешним файлом, если использовать для css элемент style то работает только с бубном, например, если взять одно слово на странице в . Проблема связана не столько с самим способом прибивания футера, сколько с особенностями min-height: 100% в Opera 9.51, во втором способе, на который ссылка ниже, она тоже есть.

Еще один способ прибивания футера9.
clear у блока float (+ миллион вариантов запроса)

Часто нужно заставить родительский блок полностью поглощать вложенные float блоки, для этого можно использоваться следующие стили:

#block {
overflow: hidden; /* для всех браузеров */

/* для IE */
height: 1%;
/* или */
zoom: 1;
}

Если у родительского блока задана высота то height: 1% не подойдет, у zoom: 1 проблема только в том, что это нестандартное свойство, если важна валидность нужно вынести в отдельный файл для IE.

Этому действу не имеющему приемлемого русского названия посвящена статья Clear для плавающих блоков10 подробнее о float и связанных с ним багами можно почитать в статье CSS Float в теории и на практике11.
скругление углов css (второй по количеству вариантов запрос)

Видимо на этот вопрос найдется не меньше миллиона ответов.

* Более 50 методов закругления углов (eng)12
* 38 способов скругления блоков13
* Я писал про закругление без изображений14, Dimox добавил к нему сглаживание15.

условные комментарии в css

Условные комментарии16 привилегия HTML, чаще всего применяются для того, чтобы сделать CSS файл видимым только для определенной версии Internet Explorera, например для IE6: