Обманывать не хорошо, так в детстве мама говорила, но иногда без этого никак... В web-верстке тоже самое - нужен хак, и заказчик требует валидность, а еще и в портфолио потом работу выкладывать. Вот и приходится хитрить, хотя, по сути, верстка страничка всё равно невалидна, просто обманутый валидатор этого не замечает (да и не хочет он это замечать). Как бы не вопили противники хаков, от этого никуда не уйти.
Постараюсь максимально выложить всё что знаю по этой теме, а что сразу не вспомню (или пока не знаю) буду со временем дописывать...
CSS-хаки для обеспечения кроссбраузерности.
"любимый" Internet Explorer 6.0 и ниже
/*\*/
* html {}
/**/
/* Хак только для IE6 */Если перед свойством в css поставить подчеркивание “_”, или дефис “-”, то эти свойства будут восприниматься только IE версии 6 и ниже:
.style {_background:#F00;}
\\width:100px; - видят только ie 5.0 и ie 5.5 (неактуально)Звездочка. Работает для IE7 и ниже:
p { background:red; /* Применимо ко всем браузерам */ *background: green; /* Применимо к IE6 и ниже */ }#hack{
color:green; /* IE 5.01 */
color/**/:blue; /* IE 5.5 */
c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
}* html .ie6 {color:red;} /* Хак только для IE6 */IE6 и ниже проигнорирует эти правила:
div>span {...}
div+span {...}IE min-width & max-width: максимальная и минимальная ширина блока:
#element {
min-width:780px;
max-width:1260px;
width expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
}Box Model. Хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента:
padding:4em;
border:1em solid red;
width:30em;
width/**/:/**/ 25em;Min-height хак от Дастина Диаза:
selector {
min-height:500px;
height:auto !important;
height:500px; }Internet Explorer 7.0 и ниже
Не все хаки для IE7 работают если в начале документа не указать !DOCTYPE.
*+html .style { background: #F00;}
html>body .style {*background: #F00;}
*:first-child+html {} * html {} /* IE 7 и ниже */
*:first-child+html {} /* IE 7 только */
html>body {} /* IE 7 и нормальные браузеры */
html>/**/body {} /* Только нормальные браузеры (не IE 7) */
>body {} /* выбирает элемент body только в IE7 */
html* {} /* выделяет все элементы внутри элемента html. Только для IE7 и ниже. */
//width:100px; - так написаное свойство проигнорируют все браузеры кроме ie 7.0 и меньше
.ie7b {#color:#00FF00;} /* Хак только для IE7,6 */a:link:visited, a:visited:link В соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе.
a:link:visited, a:visited:link {} a:link:visited, a:visited:link {} /* выбирает элемент a в IE7 и ниже */Условные комментарии
Условие может быть таким: 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.
Для всех версий IE:
<!--[if IE]><link rel="stylesheet" href="css/cssf-ie.css" type="text/css" media="screen" /><![endif]-->Для 7-й версии:
<!--[if IE 7]><link rel="stylesheet" href="css/cssf-ie7.css" type="text/css" media="screen" /><![endif]-->Для 5.01, 5.5 и 6.0:
<!--[if lte IE 6]><link rel="stylesheet" href="css/cssf-ie6.css" type="text/css" media="screen" /><![endif]-->CSS-хаки для браузера Opera
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;} /* только для Opera */
}html:first-child {} /* только для Opera */html:first-child .style {
background: #F00; /* только для Opera < 9.5 */
}Можно создать файл opera.css и подключить его в head секции документа:
<head>
<link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />
</head>CSS хаки для FireFox:
html:first-child .class { color: #368EF1; } /* для FireFox */@-moz-document url-prefix(){body { color: #368EF1; }}CSS-хак для Safari
body:first-of-type #element { color: red; }CSS-хак для Konqueror
html:not(:nth-child(1)) #element { color: red; }Для нескольких браузеров:
.class, x:-moz-any-link { color: #368EF1; } /* для FireFox, но так же работает в Internet Explorer 7 */@media all and (min-width: 0) {.safariOperaChrome {color:#FF00FF;}} /* Хак только для Safari, Opera, Google Chrome*/@media all and (min-width: 0) {div span { background: #FF0}} /*только для Opera* (так же видит Safari 3 и Google Chrome) /html:not([lang*=""]):not(:only-child) .ffSafariChrome {color:#990000;} /* Хак только для IE7, FireFox */html:root div {…} /* для Firefox (также видит safari3) */
html:root .ffSafariChrome {color:#660066;} /* Хак только для Safari, FireFox, Google Chrome */
body:first-of-type .operaChromeSafari {color:orange;} /* Хак только для Safari, Opera, Google Chrome */html>/**/body {} /* Все современные браузеры, кроме IE 7 *//*\*//*/selector{property:value;}/**/ /* MacIE */Здесь есть всё это в табличном виде.
06 Окт 2008 в 23:07
Зачетный пост
07 Окт 2008 в 10:07
а я голову недавно ломал долго не мог понять почему в IE мой css работает не так. оказалось, проблема в комментариях /* */ если их удалить, все будет норм.
08 Окт 2008 в 08:39
Нужен индивидуальный подход
10 Ноя 2008 в 16:09
Это просто ужас, столько время прошло и никак не могут прийти к единым стандартам отображения. Особенно бесит IE. интересно когда-нибудь это кончится?
01 Янв 2009 в 23:48
Как мне верхний КСС сделать видным только для ИЕ, а нижний для всех остальных, а для ИЕ невидимым?
01 Янв 2009 в 23:49
Код обрубился, падла.