Условные стили и хаки для IE6

arman29

Генератор идей
Регистрация
30 Июн 2008
Сообщения
1.248
Реакции
748
Нет такого web-разработчика, который бы не сталкивался с проблемами в IE6. Однако, если вы хотите называть себя профессионалом, вы должны быть в состоянии справиться с ними.

Я придерживаюсь того мнения, что для решения проблем с IE нежелательно использовать хаки. Они неприемлемы, поскольку они основаны на нестандартных решениях, а, следовательно, вы не можете предсказать, как они поведут себя в новых версиях браузеров. Полнофункциональным решением при борьбе с некорректным отображением в IE6 является использование условных стилей. Тем более, что условные стили поддерживает вся линейка интернет-эксплореров, вплоть до IE 8, и с их помощью можно написать стиль для любой версии этого браузера или для нескольких версий одновременно.

Зачем использовать условные стили?
  1. Если у вас есть проблема отображения, её обязательно нужно исправить
  2. Использование условных стилей поможет вам исправить проблемы с IE не прибегая к хакам, оставляя ваш код чистым
  3. Использование этой техники одобрено Microsoft
Кстати, условные стили не обязательно должны базироваться только на CSS, вы можете также подгружать различные стили для различных браузеров при помощи JavaScript.

Примеры использования условных стилей

1. Подгружаем стили для всех версий IE
Код:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
2. Прячем стили от всех версий IE
Код:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
3. Подгружаем стили только для IE7
Код:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
4. Подгружаем стили только для IE6
Код:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
5. Подгружаем стили только для IE5
Код:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
6. Подгружаем стили только для IE5.5
Код:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
7. Подгружаем стили для IE6 и ниже
Код:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

8. Подгружаем стили для IE7 и ниже
Код:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
9. Подгружаем стили для IE8 и ниже
Код:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
10. Подгружаем стили для IE6 и выше
Код:
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />/
<![endif]-->

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
11. Подгружаем стили для IE7 и выше
Код:
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
12. Подгружаем стили для IE8 и выше
Код:
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Ну что же, выше приведены основные конструкции применения условных стилей. Если вам этого не достаточно, или вы просто из любопытства хотите узнать как выглядят CSS-хаки, приведу ниже несколько примеров. Почему их не желательно использовать я упоминал в самом начале этой статьи.

Стиль только для IE7
Код:
* html #div {
height: 300px;
}
Стиль только для IE7
Код:
* html #div {
height: 300px;
}
Скрыть стиль от IE7
Код:
#div {
_height: 300px;
}
Скрыть стиль от IE6 и ниже
Код:
#div {
height/**/: 300px;
}

html > body #div {
height: 300px;
}

Перевод: efimov.ws
Оригинал: css-tricks.com
 

duncan

батяр з личакова
Регистрация
10 Апр 2007
Сообщения
1.599
Реакции
449
хак, например, min-height
для IE6:

Код:
#div{ min-height:400px;}
#div{ -height: 400px;}
 

bifot

Писатель
Регистрация
17 Дек 2013
Сообщения
1
Реакции
0
В ИЕ при клике на ссылку, во время клика появляется серый фон. Он совершенно не вписывается в дизайн.
Чтобы было понятнее, вот скрин:
iebga.png

Решается он легко, одной строчкой:
Код:
a { background: none; }
 

xotox

Постоялец
Регистрация
10 Янв 2013
Сообщения
51
Реакции
4
да зубудьте вы уже о таких браузерах как ie6-8, их уже давно никто не использует, что голову ломать и выдумывать хаки, лучше html5 и css3 изучайте и пользуйтесь всеми преимуществами данных возможностей
 

snooper

Постоялец
Регистрация
2 Июн 2014
Сообщения
71
Реакции
19
да зубудьте вы уже о таких браузерах как ie6-8, их уже давно никто не использует, что голову ломать и выдумывать хаки, лучше html5 и css3 изучайте и пользуйтесь всеми преимуществами данных возможностей
я тебя огорчу, используют.
Иногда имею верстку из-за бугра, так они там все на старых ИЕ версиях. Почему, казалось бы. А ответ прост. Они не покупают на офисы, и даже домой новые версии софта мелкомягких, а юзают старые версии, Хря, 2003 офис и так далее, а зачем тратить лишние деньги?. Ну и так как у нас не юзают на лево и право пиратский софт, это для них дико.
По этому верстка под ИЕ 4+ ещё долго будет актуальной, как минимум для бугра, ну и платят они между прочим хорошо за эти "костыли" :)
 
Сверху