Joomla! Україна

Нотатки по CSS хакам для IE

15.02.2008, 07:21  |  Прочитано: 12103 раз  |  CSS та верстка  |  Автор Higher (переклад та адаптація Dutch)

Іноді буває складно написати CSS, який би відображався одинаково у всіх браузерах. Тому пропоную Вам деякі корисні поради як досягнути бажаного результату у вигляді нотаток.

­Умовні коментарі (Conditional Comments)

Для всіх версій IE:

<!--[if IE]>    Some Css Code<![endif]-->

Для 7-й версії:

<!--[if IE 7]>    Some Css Code<![endif]-->

Для 5.01, 5.5 і 6.0:

<!--[if lte IE 6]>    Some Css Code<![endif]-->

Умови:

  • IE (Всі версії IE)
  • lt IE version (Нижче зазначеної версії)
  • lte IE version (нижче та дорівнює зазначеної версії)
  • IE version (тільки для цієї версії)
  • gte IE version (вище або рівної зазначеної версії)
  • gt IE version (вище зазначеної версії)

Min-width і Max-width

Мінімальна ширина:

 #wrapper{min-width: 750px;width:expression(document.body.clientWidth < 750? "750px": "auto" );} 

Мінімальна та максимальна одночасно:

#wrapper{min-width: 750px;max-width: 1220px;width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}

Мінімальна висота від Dustin Diaz:

#id{ min-height: 100px; height:auto !important; height:100px; } 

Універсальні селектори

IE 6 і нижче:

* html {}

IE 7 і нижче:

*:first-child+html {} * html {}

Тільки IE 7:

*:first-child+html {}

Тільки IE 7 і всі сучасні браузери:

 html>body {}

Всі сучасні браузери, крім IE 7:

 html>/**/body {}

Opera 9 і нижче:

html:first-child {}