Вторник, 7 Апреля 2009 года, 17:39
Просмотров: 9995 шт.

Hi-Tech → CSS Max-Width и глюки IE. Хаки для Internet Explorer


CSS свойство max-width - отличное средство, если вы не хотите, чтобы элемент был больше заданного размера. Применение этого свойства к картинкам очень удобно. Конечно, зачастую лучше специально подготавливать изображения для публикации в сети Интернет, однако это не всегда удобно и не всегда возможно.

*****


Синтакцис для использования max-width таков:

selector {max-width:value;}

Например, если вы хотите, чтобы все изображения в блоке с id wrapper были максимум 400 пикселов по ширине, вы можете прописать в таблице стилей что-то вроде этого:

.wrapper img {max-width:400px;}


Естесственно, вы можете выставлять значение max-width любым. Также это значение можно указывать и в процентах, например для "резиновых" сайтов (ширина которых зависит от разрешения экрана):

.wrapper img {max-width:95%;}


В этом случае ширина изображений не превысит 95% от имеющегося места (Обычно желательно не занимать изображением 100% экрана, а оставлять небольшие отступы).

Но... Не всё так просто как кажется, и виной тому старый добрый Internet Explorer. Всё дело в том, что все версии браузера вплоть до 7 (включительно) не поддерживают это css-свойство. (Не берусь говорить за 8 версию - даже не пробовал) - прим. ред.

А так уж сложилось, что этим браузером бользуется львиная доля всех посетителей сайта.

Но выход есть. И выход - в возможности обработки javascript в css, встроенной в IE.

Вот простой синтаксис использования такого условия:

selector {width: expression(this.width > value ? value: true);}

Я не буду рассказывать все варианты использования expression в css для IE, но, поверьте, вариантов использования масса. Я лишь покажу вам как заставить IE уменьшать изображения до заданного размера, если исходный размер (ширина) больше чем нам необходим.


.wrapper img {
max-width:400px;
width: expression(this.width > 400 ? 400: true);
}


К сожалению, мне не удалось найти способа использовать этот метод для обозначения максимальной ширины изображения в процентах. Однако с пикселями всё работает корректно. Браузеры, отличные от IE, спокойно игнорируют условие width:expression, обрабатывая только max-width. Что, собственно, нам и нужно.

Эта запись отмечена тегами: cssmax-widthhtmliehack

lifecity
Блог им. lifecity
Рейтинг записи
  +5  

←Туда  Сюда→

Комментарии:

  • Maxim_EmotionMaxim_Emotion  7 Апреля#  
    Первый! Автору респект.

    Описанный метод очень удобен. От себя добавлю, что бы другим браузеров вообще не пришлось обращать внимания, а потом игнорировать expression, -- достаточно просто поместить все это дело (хак) в отдельный css и вызывать его через конструкцию:


    <!--[if IE 7]>
    <link href="ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->


  • YaVedroYaVedro  9 Марта#  
    Спасибо за статью очень помогла.

Авторизуйтесь или зарегистрируйтесь, чтобы иметь возможность комментировать записи!


Категории

Товары и Услуги  Авто  Здоровье  Hi-Tech  Fashion  Стройка  Разное  Домашний очаг  Бизнес  Общество  Кухня  Образование  Отдых  Флора и фауна  Музыка и кино  Спорт  Туризм  География  Позитив  Хобби  Наука и Техника  Карьера  Теория жизни  История  Знаменитости  Творчество  Отношения  Фольклор  Религия  Право  Астрономия  Мистика 


Облако тегов



TOP Блоггеры

profitinvestingprofitinvesting
Записей: 3275

webweb
Записей: 741

sorokasoroka
Записей: 611

ShaDeRzzShaDeRzz
Записей: 242

little_fairylittle_fairy
Записей: 164

nomeNNescionomeNNescio
Записей: 153

savchenkosavchenko
Записей: 98

BeautyPROFBeautyPROF
Записей: 94

Jetos2Jetos2
Записей: 82

DiezelSun2DiezelSun2
Записей: 73

ORCORC
Записей: 46

barkarolabarkarola
Записей: 38

Весь список

Последние комменты

  • Nielko написал(а):
    Для многих жителей Украины актуален вопрос работы в Европе, поэтому раскрыть подробности этой темы б...
  • Krasser написал(а):
    Довольно интересное интервью получилось - много полезной информации, особенно для тех, кто первый ра...
  • Krasser написал(а):
    Через автовыкуп продать быстро можно, но все же не так выгодно, как при личной продаже.
  • Krasser написал(а):
    Годные советы!
  • SKY-NIK написал(а):
    Лучшие капперы – рейтинг надежных прогнозистов в мире ставок на спорт Услугами капперов пользуются ...

Сделай правильный выбор!