CSS для разных IE в общей таблице стилей.

26 05/10
20

Если вы используете условные комментарии для IE и вам не хотелось бы подключать несколько файлов, есть простой способ, позволяющий использовать одну таблицу стилей, в т.ч. и для разных версий IE.

Вместо того, чтобы подключать дополнительные таблицы стилей, необходимо с помощью условных комментариев добавить внешний блок с соответствующим id для каждой версии.

1
2
3
4
5
6
7
8
9
10
11

<!--[if IE 6]>
<div id="ie6">
<![endif]-->
    <div id="wrap">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
<!--[if IE 6]>
</div>
<![endif]-->

Теперь, чтобы например переопределить какое-либо свойство для IE6, нужно добавить в селектор #ie6.

1
2

#wrap { … } /* Общее правило */ 
#ie6 #wrap { … } /* Правило для IE6 */
Теги: • •

Смещение фонa у input в IE6 и 7

14 12/09
23

Зачастую многие дизайнеры в своих работах используют отличные от стандартных элементы форм. К сожалению, в процессе вёрстки подобных элементов иногда возникают те или иные трудности. Например, Dimox недавно поднял вопрос вертикального выравнивания у кнопок в FF.

Я же хочу обратить ваше внимание на баг, который присутствует в IE6, 7 у текстовых полей с фоновым изображением.

1

<input type="text" />
1
2
3
4
5
6
7
8

input{
   width:200px;
   height:19px;
   padding:8px 10px;
   border:none;
   background:url(images/input-bg.png) no-repeat left top;
   font:1em Arial,Helvetica,sans-serif
}

В том случае, если введенный текст превышает ширину элемента, фоновое изображение в IE6, 7 начинает смещаться.

Смещение фона у полей ввода текста в IE6 и 7

Использование background-attachment: fixed работает только в IE6, в 7-ке проблема остаётся.

Можно указывать background-position: right bottom для фона. В этом случае изображение смещается в противоположную сторону, и смещения не видно, если не перемещать курсор обратно, в начало текста.

Наиболее универсальным способом является использование дополнительного элемента, например span, с необходимым фоном.

Жду ваших комментариев.

Теги: •

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

13 10/07
39

Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии.

Условный комментарий выглядит следующим образом:

<!­­--[if IE]> Специальные инструкции для IE здесь. <![endif]-->

Структура похожа на обычный комментарий в HTML, поэтому остальные браузеры будут воспринимать его как обычный комментарий. Explorer распознаёт специальный синтаксис <!--[if IE]>, решает условие if и парсит содержимое условного комментария так, как если бы это было содержание нормальной страницы. Условные комментарии используют синтаксис HTML комментариев, поэтому они могут быть включены только в HTML страницу. Удобно бывает сделать отдельные стили для IE и вставить тег link в условный комментарий.

Ниже написаны несколько условных комментариев, которые показывают версию Internet Explorer, которую вы используете.

<!--[if IE]> Инструкции для Internet Explorer <![endif]-->
<!--[if IE 5]> Инструкции для IE 5 <![endif]-->
<!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]-->
<!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]-->
<!--[if IE 6]> Инструкции для IE 6 <![endif]-->
<!--[if IE 7]> Инструкции для IE 7 <![endif]-->

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

Оператор Описание
lt меньше чем
lte меньше или равно
gt больше чем
gte больше или равно

И несколько примеров:

<!--[if ! IE 5]> Инструкции для  IE 5.5, 6 или 7 <![endif]-->
<!--[if gt IE 5.0]> Инструкции для IE 5.5, 6 или 7 <![endif]-->
<!--[if lte IE 5.5]> Инструкции для IE 5.0 или 5.5 <![endif]-->
<!--[if gte IE 6]> Инструкции для IE 6 или 7 <![endif]-->
<!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->

По материалам Условные комментарии в CSS и Использование условных комментариев в IE

Теги: •