Вверх

Блог
RSS лента

CSS: max/min Height и Width в Internet Explorer

Свершилось чудо: оказывается, что max/min-height и max/min-width можно использовать в Internet Explorer!
В частности, используя преимущество атрибутики CSS в IE - возможность использования expression, - Вы можете заставить IE выводить нужную Вам высоту и ширину. CSS атрибут expression позволяет использование JavaScript команд в IE.

JavaScript и CSS вместе? Благодарим Мелкомягких!

Почему же это так замечательно? Да потому, что в других, стандартно-компилируемых браузерах (в отличие от IE), параметры max/min-height и max/min-width выполняются стандартами CSS..

  1. <div style="max-width: 333px;">
  2.    [Содержимое этого блока будет максимум в 333px по высоте в стандартно-компилируемых браузерах]
  3. </div>

Конечно, это слишком легко для разработчиков Internet Explorer! И поэтому данный аттрибут (max-width) просто не выполняется. К счастью, IE поддерживает свой собственный атрибут expression, который позволяет нам использовать JavaScript expression'ы для манипуляции со свойствами HTML-документа, такими как max-width и max-height. Для примера, чтобы задать значение аттрибуту через expression, делаем так:

  1. div {
  2.    width: expression(333 + "px");
  3. }
  4.  
  5. ..что соответствует:
  6.  
  7. div {
  8.    width: 333px;
  9. }

Негативная сторона использования expression-аттрибутики в IE, заключается в том, что если JavaScript принудительно выключен пользователем в настройках браузера, то данный способ не будет работать. Однако использование max/min ширины/высоты (также как и других параметров) является важным инструментом web-разработок. Поэтому, закрывая глаза на недостаток, покажем несколько базовых способов для задания max/min параметров через expression

max-width в IE

Этот метод проверен в IE6 и должен, по идее, работать в IE5. Просто измените параметры по своему усмотрению (приведенный код комментирован пояснениями) и используйте в своих разработках. В данном примере, мы указали max-width равным 777px - в первой строчке для IE, и второй - для других браузеров со стандартной компиляцией:

  1. * html div#division {
  2.   width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* задает max-width для IE */
  3.    max-width: 777px; /* указывает max-width для браузеров со стандартной компиляцией */
  4. }

А в этом примере, мы задали max-width равным 33em, для IE и прочих браузеров:

  1. * html div#division {
  2.   width: expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" ); /* задает max-width для IE */
  3.    max-width: 33em; /* устанавливает max-width для браузеров со стандартной компиляцией */
  4. }

min-width в IE

  1. * html div#division {
  2.   width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* задает min-width для IE */
  3.    min-width: 333px; /* указывает max-width для браузеров со стандартной компиляцией */
  4. }

max-height в IE

  1. * html div#division {
  2.   height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* задает max-height для IE */
  3.    max-height: 333px; /* указывает max-height для браузеров со стандартной компиляцией */
  4. }

min-height в IE

  1. * html div#division {
  2.   height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* задает min-height для IE */
  3.    min-height: 333px; /* указывает min-height для браузеров со стандартной компиляцией */
  4. }

Ваша оценка: Пусто Средняя: 5 (4 голосов)

Комментарии

Отправить комментарий

 
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links from G2 are formatted for use with Lightbox2
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

Подробнее о форматировании

CAPTCHA
Если вы человек, то тогда введите символы изображенные на картинке ниже
Image CAPTCHA
Введите символы, изображенные на картинке.
Главная | Портфолио | Услуги | Контакты | Блог