Специфический CSS для разных браузеров
В жизни верстальщиков часто бывает ситуация, когда дизайнер нарисовал сложный макет, который достаточно непросто сверстать так, чтобы он одинаково выглядел во всех браузерах. В таких случаях на помощь могут прийти хаки для CSS - фрагменты кода, которые будет понимать только определенный браузер. Ниже приведены примеры таких хаков практически для всех распространенных браузеров.
CSS:
-
/* Opera 6 */
-
@media all and (min-width: 1px) { {} #selector {} }
-
-
/* Opera 7, 8 */
-
@media all and (min-width: 1px) { #selector {} }
-
-
/* Opera 9 */
-
@media all and (width) { #selector {} }
-
-
/* Opera 9 */
-
@media all and (min-width:0px) {
-
head~body #selector { ... }
-
}
-
-
/* MSIE 6 */
-
* html .someClass { ... }
-
-
/* MSIE 7 */
-
[className="actualClassName"] { ... }
-
.actualClassName:not([className="actualClassName"]) { ... }
-
-
/* Код для Gecko */
-
html:not([lang*=""]) ... { ... }
-
-
/* Фильтруем Gecko - все Firefox/Firebird/Phoenix, Netscape 6+ */
-
html[lang*=""] ... { ... }
-
-
/* Код для Gecko 1.8+ - Firefox 1.5, Camino, Seamonkey, Galeon, Epiphany и т.д. */
-
html:not([lang*=""]):not(:only-child) ... { ... }
-
-
/* Код для Safari/KHTML но не WebKit */
-
html[xmlns*=""] body:last-child ... { ... }
-
-
/* Код для WebKit */
-
@media all and (min-width:0px) { body:last-child ... { ... } }
-
-
/* Код для Safari/Webkit/KHTML */
-
body:last-child:not(:root:root) ... { ... }
-
-
/* Код для Konqueror 3.4.3 - возможно изменится в будущих версиях */
-
html:not(:nth-child(1)) ... { ... }
Дата публикации: Thursday, March 15th, 2007, 13:20
Автор: Filosoff
Разделы: CSS
Лента коментариев: RSS 2.0
Схожие по тематике заметки:
Коментировать
Trackback
April 25th, 2007 at 14:26 Quote
Нашел одну полезную вещь для ИЕ7 и не только
> #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 */
> }