Тим-Тим (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} dimitridze) wrote,@ 2007-04-30 21:38:00 |
|
| Current music: | Dylan & Raiden - Future's Futile |
| Entry tags: | css, firefox, work, для себя |
IE7 CSS Hacks
Просто, как шпаргалка, для себя... чтобы потом опять не искать в гугле... потому что именно этот РАБОТАЕТ, а conditional comments идут в жопу! + пару слов, что я об этом всем думаю... накопилось, бл%..
#mm .rollOver {
html>body #mm .rollOver {
*:first-child+html #mm .rollOver {
height: 165px; /* IE 6 & bellow */
}html>body #mm .rollOver {
height: 163px; /* FF & Others */
}*:first-child+html #mm .rollOver {
height: 165px !important; /* #%@#%(! IE 7 */
}Последовательность должна быть именно такой потому, что, как я понимаю, CSS файл читаеться сверху вниз всеми (да, не знаю я этого.. не читал всякие умные книжки.. ниасилил..). Я самоучка - учусь "методом тыка". Don't like me? Megabyte me!
Первое для Ишака 6 и ниже, т.к. следующие классы он не видит..
Второе для Firefox и Opera (проверял только на Firefox 2 и Opera 9, потому что нех%№ старьём пользоваться, раз есть новая версия), 7-ой ишак второе "правило" тоже видит, но он идет тоже в жопу вместе с вышеупомянутыми conditional comments, которые кстати Мелкомягкие прогеры рекомендуют использовать для него, т.к. большинство CSS хаков для 6-го ишака 7-ой теперь понимает... вот только засорять шапку документа всякими комментами я не хочу!
Ну и наконец, последнее видит только IE 7, 6-ой ишак, Firefox 2 и Opera 9 это все не видят. Не стал вдаваться в подробности и искать почему по той же самой причине - 7-ой ишак идет в жопу вместе со своим мега_кулл_rendering_engine, от которого у меня лично болеть глаза начинают через некоторое время... увы приходиться проверять отображаемость в 4-х вышеупомянутых browser-ах..
Есть вероятность, что в одной из очередных заплаток мелкомягковцы исправят этот баг... когда и если это произойдет, тогда и будем с этим разбираться, уверен, что к тому времени добрые люди придумают бóльшее количество примочек, чтобы 7-ой ишак не вы%№ывался...
» Update (30.04.07)
CSS Hack #2
p.style { color:red; } /* IE7 */
* html p.style { color:blue; } /* Other IE */
*|html p.style { color:pink; } /* FF, Opera, Konqueror, Safari */
* html p.style { color:blue; } /* Other IE */
*|html p.style { color:pink; } /* FF, Opera, Konqueror, Safari */
CSS Hack #3
#ie7-hook-id div[class^="target-class"] { background: #ff0000; }
div#ie7-hook-id .target-class { background: #0000ff; }
div#ie7-hook-id .target-class { background: #0000ff; }
CSS Hack #3.1 - more compactly
* div[class^="ie7-target-class"] { background: #ff0000; }
body .ie7-target-class { background: #0000ff; }
body .ie7-target-class { background: #0000ff; }
Valid CSS Selectors
* html {} /* IE 6 and below */
*:first-child+html {} * html {} /* IE 7 and below */
*:first-child+html {} /* IE 7 only */
html>body {} /* IE 7 and modern browsers only */
html>/**/body {} /* Modern browsers only (not IE 7) */
html:first-child {} /* Recent Opera versions 9 and below */
*:first-child+html {} * html {} /* IE 7 and below */
*:first-child+html {} /* IE 7 only */
html>body {} /* IE 7 and modern browsers only */
html>/**/body {} /* Modern browsers only (not IE 7) */
html:first-child {} /* Recent Opera versions 9 and below */
P.S.: Tested on: Firefox 2, IE6 & that f#$@ing IE7.
