ArtShok. Сайтостроение и немного SEO

Если вы еще не забили на отображение сайта (вашего или клиента) в Internet Explorer 6 (имеется в виду ie6, версии ниже в данной статье рассматриваться не будут), то наверняка уже сотню раз сталкивались с тем, что какой-нибудь мелкий “косяк” там да вылезет. Кроссбраузерная верстка, легко реализуемая в Opera, FireFox и Chrome, у вебмастеров порождает только чувство ненависти к Эксплореру, для коего приходится придумывать всякие ухищрения.

Вообщем, будьте готовы занести эту статью в закладки, ибо она будет предельно информативной и полезной:)

Итак, для получения кроссбраузерной верстки, мы можем использовать:

1. условные комментарии
2. хаки для CSS

Условные комментарии для IE

Условные комментарии используются для написания инструкций для Intenet Explorer (как правило просто дается ссылка на отдельный файл стилей). Код выглядит следующим образом:

<!­­--[if IE]>Действие для IE<![endif]-->

Например:

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

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

1. lt (less than) - меньше чем
2. lte (less than or equal) - меньше или равно
3. gt (greater than) - больше чем
4. gte (greater than or equal) - больше или равно

Например:

<!--[if lte IE 7]>Действие для версии IE, меньшей или равной 7<![endif]-->
<!--[if gt IE 6.0]>Действие для версии IE выше 6.0<![endif]-->

CSS xаки для IE

Для правильного отображения в IE6 в файле стилей к требуемому элементу добавляем *html, для EI7 - *+html.

Например:

*html .header {padding: 15px 0px 25px;} /* для IE6 */
*+html .header {padding: 13px 0px 22px;} /* для IE7 */

Также для IE6 срабатывает добавление нижнего подчеркивания (_), дефиса (-), двойной наклонной (//) и звездочки (*) перед свойством (я, например, чаще всего использую последний способ).

Например:

.menu {_padding: 15px 0px;}
.phone {-padding: 15px 20px;}
.footer {*padding: 20px 15px 35px;}
.content {<code>//width: 600px;</code>} /* Для IE 7 и ниже */

IE6 игнорирует следующие правила:

div>span {}
div+span {}

Например:

html>body .header {paddung: 20px 15px;}

Еще пару хаков для IE7:

*:first-child+html {} * html {} /* IE7 и ниже */
*:first-child+html {} /* только IE7 */
html>body {} /* Новые браузеры и IE7 */
html>/**/body {} /* Новые браузеры, без IE7 */
>p {} /* выбирает элемент p только в IE7 */

Ну еще один мной любимый хак - !important

Пример:

p {padding-bottom: 15px !important;} /* Все браузеры кроме IE6 */
p {padding-bottom: 13px;} /* для IE6 */

Все! Этого вам более чем хватит, для кроссбраузерной верстки. Желаю удачной практики.

Рекомендуемые статьи:

• Пока нет ничего по данной тематике

Обязательно к использованию: