IE и его далеко не совершенная реализация CSS — сидели на трубе…

ie6

Как вы, возможно, уже знаете, версии Internet Explorer до версии 7 не поддерживают свойство max-width. И как бы нам ни хотелось вообще забыть о существовании IE6, на сегодняшний день этот браузер все еще занимает существенную долю рынка. Но означает ли отсутствие поддержки max-width, что мы, образно говоря, оказались в лодке без весел?


Вообще-то нет. В специальную таблицу стилей для IE мы можем добавить такой код.

 
img,
object {
width: 100%;
}

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

Для изображений вроде нашего coffee.jpg, которое наверняка всегда будет слишком большим для своего контейнера, новое правило будет работать хорошо. Но изображения меньшего размера могут оказаться растянутыми и, следовательно, искаженными.

Так что если в вашей разметке есть места, где точно будут встречаться элементы слишком большого размера, подходящие для «резиновой» верстки, вы можете дополнительно усложнить селекторы и таким образом изолировать ваше правило. Например, можно сделать так.

img. full,
p. photo img,
object.full {
width: 100%;
}

Это дополнительное усложнение — эффективное средство для ограничения сферы действия правила width: 100%;. Теперь мы можем быть уверены, что это правило не приведет к неуместному увеличению размера элемента в проблемных областях макета. При соблюдении разумных мер предосторожности это оказывается превосходным способом, позволяющим обойти отсутствие поддержки max-width в старых версиях Internet Explorer.

Что ж, задача решена, не так ли? Ну… почти.

При написании статьи использовался опыт работы со статьей о ремонте карданного вала.