min-width для IE

Internet Explorer и поддержка CSS

С каждой новой версией Internet Explorer, поддержка стандарта Cascading Style Sheets (CSS) неизменно улучшается. Internet Explorer 6 был первым в семействе Internet Explorer’ов, который полностью поддерживал CSS 1-го уровня совместимости. Internet Explorer 8 полностью совместим со спецификацией 2-го уровня CSS Level 2 Revision 1 (CSS 2.1) и поддерживает некоторые возможности CSS Level 3 (CSS 3).

min-width и Internet Explorer

Нормальные браузеры понимают, что нужно делать, когда задана минимальная ширина окна, т. е. min-width. Но с Internet Explorer 5, 6, 7 — «немного» по-другому. Все веб-разработчики знают, что Internet Explorer напрочь игнорирует подобные инструкции. Так было всегда, пока не появился Internet Explorer 8. Но и у негоесть свои заморочки. Но об этом в конце статьи.

Сейчас рассмотрим обычное CSS-правило и как его воспринимают браузеры.

Зададим самое распространенное разрешение для современных ноутбуков. Обычный фрагмент CSS-кода нормально работает во всех современных браузерах.

#around {
 min-width: 1280px;
}

Для Internet Explorer нужен небольшой пинок.

min-width и IE 5-7

Как сделать, чтобы старые IE 5-7 понимали свойство min-width? Есть несколько способов. Один из них — использование JavaScript-конструкции expression непосредственно в свойствах CSS.

CSS expression появился в IE 5.0, чтобы избавить веб-разработчика от необходимости разбираться в тонкостях CSS позиционирования. Все остальные браузеры игнорируют expression.

Наряду с условными комментариями, это замечательный подарок для веб-разработчиков, поскольку множество недоработок Internet Explorer может быть компенсировано при помощи expression.

Задание минимальной ширины окна при помощи expression:

#around {
 min-width: 1280px;
 width:expression(document.body.clientWidth < 1280? "1280px": "auto");
}

min-width и IE 8

IE 8 тоже понимает expression и тогда работает нормально. Но как же тогда на счет полной поддержки CSS2.1? Оказывается, что на официальном сайте MSDN есть примечание:

CSS функции, которые являются новыми для Internet Explorer 8 будут работать только когда страница отображается в режиме IE8 (или выше). Вы можете подстраховаться, чтобы страница отображалась в режиме IE8, для этого нужно добавить в head секцию вашей страницы мета-тег:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Дополнительная информация по вопросу min-width в Internet Explorer

• Таблица совместимости Internet Explorer с CSS
• max-width in Internet Explorer
• min-width для IE