Всем привет. Сегодня я хочу поговорить про CSS-хаки. И вот почему. Даже с выходом восьмой версии IE необходимость их использования, к сожалению, не исчезла и иногда мне кажется что никогда и не исчезнет. Да и n-ое число клиентов по прежнему сидят через архиненавистный ie6.
Все CSS хаки в голове удержать невозможно, вот и решил собрать для себя список этих самых CSS хаков, может кому-то тоже пригодиться:
Итак, по порядку.
CSS хаки для Internet Explorer:
/* для всех версий */
.class { *color: #8abdce; }
/* для Internet Explorer 6 */
.class { _color: #8abdce; }
или
.class { -color: #8abdce; }
/* для Internet Explorer 7 */
*+html .class { color: #8abdce; }
или
*:first-child+html .class { color: #8abdce; }
или
html>body .class {
*background: #F00;
}
/* для Internet Explorer 8 */
.ie8only { color /*\**/: #fff\9 }
CSS хаки для Opera:
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}
или
html:first-child .class { color: #8abdce; }
или
*|html[xmlns*=""] .style {
background: #F00;
}
CSS хаки для FireFox:
html:root .class { color: #8abdce; } /* этот работает ещё и в Safari */
или
.class, x:-moz-any-link { color: #368EF1; }
или
@-moz-document url-prefix() {
.style {color: #F00;}
}
/* для FireFox 1-2 */
@-moz-document url-prefix() {
color: #F00;
}
CSS хаки для Safari:
html[xmlns*=""] body:last-child .class { color: #368EF1; }
CSS хаки для Safari и Google Chrome:
body:last-child:not(:root:root) .style {
color: #F00;
}
или
body:nth-of-type(1) p {
color: #333333;
}
Конечно хаки это зло — но иногда без них решить задачу просто невозможно.
Обмен постовыми
- Заработок в Интернете от Бездомного Бродяги
2leep.com
25 декабря 2009 в 14:12
Спасибо за хак под ИЕ8
Недавно глюк заметил в нём 
Хоть 6 и 7 версии отображали всё почти одекватно 
25 декабря 2009 в 16:18
А зачем нужны хаки для IE? Куда проще без хаков. Например, так:
<!—[if lte IE 6]>
<style type=»text/css»>
#all{text-align:left}
#location {position: relative;}
#top {top:258px;}
#main {top:247px;}
</style>
<![endif]—>>
27 декабря 2009 в 14:23
Сандер, не думаю что так проще. Вообще выносить стили в html документ — неправильно. Если поправок по ИЕ много, то действительно разумнее поместить их в отдельный файл, но если надо подравить 1-2 класса хак — наиболее подходящее решение.
27 декабря 2009 в 21:42
Ну тогда можно и
<!—[if lte IE 6]>
<link rel=»stylesheet» type=»text/css» href=»ie6.css»>
<![endif]—>
28 декабря 2009 в 0:45
У IE я смотрю больше всего уязвисмостей.
Именно поэтому я им не пользуюсь!
29 декабря 2009 в 16:11
Спасибо, хаки для ie — очень пригодились
07 января 2010 в 14:28
Спасибо, мне как человеку не знающему все тонкости верстки, хаки пригодились)
08 февраля 2010 в 17:23
Когда люди перестанут пользоваться Ишаком. Одним злом на Земле будет меньше. Спасибо за статью, кое что не знал.
16 апреля 2010 в 16:18
Тоже очень благодарен за хаки очень выручили,спасибо
14 декабря 2010 в 15:02
Перевел интересную статью по CSS хакам. Возможно будет полезной CSS Хаки для Firefox, Opera, Safari и Internet Explorer
01 февраля 2011 в 16:23
IE 6 и IE7 надо вообще отсылать нафиг, они устарели…—> Обнови браузер, дружбанчик !!!:D