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

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('about:blank');
}

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

пример

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

HTML

<div id="header">
</div>

<div id="content">
</div>

<div id="footer">
</div>

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;
}

пример

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

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

Еще один способ прибивания футера.

clear у блока float (+ миллион вариантов запроса)

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

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

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

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

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

скругление углов css (второй по количеству вариантов запрос)

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

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

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

<!--[if IE 6]>
<link rel="stylesheet" href="styles.css" type="text/css" media="all">
<![endif]-->

Похожие статьи