Отзывчивый веб-дизайн.

Max-width в Internet Explorer.

Суровая правда заключается в том, что Internet Explorer 6 и ниже не поддерживают свойство max-width. Что касается IE7 и выше, тут все в порядке. Но если вы, к моему глубочайшему сожалению, застряли в достопочтенном IE6 или более старой версии браузера, то придется кое-что доработать.

Существует несколько путей заставить свойство max-width работать в IE6. Большинство из них основано на JavaScript, обычно на базе проприетарного фильтра expression компании Microsoft, для динамической оценки ширины элемента и ручного изменения размеров в случае превышения установленного лимита. В качестве примера такого нестандартного подхода я могу порекомендовать статью Свенда Тофте (http://bkaprt.com/rwd/12/).

Что касается меня, я все-таки предпочитаю более простой CSS-подход. Все современные браузеры поддерживают свойство max-width:

img,

embed,

object,

video {

max-width: 100 %;

}.

Но в отдельной таблице стилей для IE6 я бы сделал так:

img,

embed,

object,

video {

width: 100 %;

}.

Заметили разницу? В IE6 и ниже правило width: 100 % оказывается важнее max-width: 100 %.

Вот здесь внимание: это совершенно разные правила. Если max-width: 100 % запрещает изображению превышать ширину контейнера, то width: 100 % делает его ширину равнозначной ширине содержащего его элемента.

В большинстве случаев этот прием работает отлично. Например, наша чрезмерно большая картинка robot.jpg будет всегда больше содержащего ее контейнера, поэтому правило width: 100 % в этом случае можно применять смело.

Что касается более мелких изображений, например миниатюр или большинства встроенных роликов, их не всегда можно слепо масштабировать при помощи CSS. В этом случае для IE лучше сделать так:

img.full,

object.full,

.main img,

.main object {

width: 100 %;

}.

Если вы не хотите на вашей странице применять правило width: 100 % ко всем медиафайлам с фиксированной шириной, то можете написать список селекторов, которые будут размечать определенные виды изображений или видео (img.full) или определенные области документа, в которые вы будете вставлять файлы большого размера (.main img, main object). Если изображения или другие медиафайлы появятся в этом списке, они станут гибкими, в противном случае – останутся в своем отсталом пиксельном состоянии.

Таким образом, если вы все еще работаете с морально устаревшими версиями Internet Explorer, внимательно применяйте это правило, и все получится. Эту проблему мы решили, переходим к следующей.

И это что-то.