VESELOV.SUMY.UA

CSS хаки

---

CSS-хаки для браузера Internet Explorer
Хак, предназначенный для определения hasLayout

* { zoom : 1 ; }

для правильной работы фоновых изображений формата PNG

* { behavior : url ( "css/iepngfix.htc" ); }

Скачать можно от сюда

Conditional comments в IE

/* Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте !условие */
/* Условие может быть таким:
IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v. */

Conditional comments в IE6, IE7, IE8

/* Таблица стилей для IE6 */

/* Таблица стилей для IE7 */

/* Таблица стилей для IE8 */

В IE существуют глюки, когда border и padding включаются в ширину элемента

.class { 
  padding : 4em ; 
  border : 1em solid red ; 
  width : 30em; 
  width /**/ : /**/ 25em ; 
}
/* Для IE ширина блока меньше на величину padding + border */

Min-width и max-width в IE

.class { 
  min-width : 500px ; 
  width : expression ( 
    document.body.clientWidth < 500? "500px" : "auto" 
  );
}
/* Для IE ширина блока меньше на величину padding + border */

.class { 
  min-width : 500px ; 
  max-width : 750px ; 
  width : expression ( 
    document.body.clientWidth < 500? "500px" : 
    document.body.clientWidth > 750? "750px" : "auto" 
  );
}
/* Для IE ширина блока меньше на величину padding + border */

Простые селекторы

* html .class { } /* В случае, если у html-страницы есть доктайп, этот хак работает в IE6 */
/* В случае quirks-mode, хак работает в IE6 и IE7. */
*:first-child+html .class { } /* Для IE 7 и ниже (first-child) */
*+html .class { } /* Для IE 7 */
*:first-child+html .class { } /* Для IE 7 */
html>body .class { } /* Для IE 7 и нормальных браузеров */
html>/**/body .class { } /* Для нормальных браузеров (кроме IE 7) */
/* Пример:
.class { background:red }
*html .class { background:green }
Во всех браузерах кроме IE6 и ниже бэкграунд будет красный, а в IE6 и ниже браузерах - зеленый */