Разные CSS для разных браузеров

Разные CSS для IE, Firefox, Opera, Safari Из-за разных интерпретаций HTML и CSS разными браузерами (в результате чего в одном браузере все красиво, а в другом – все разломано), иногда приходится подсовывать для каждого браузера (чаще для IE) отдельный файл со стилями. Обычно должено помогать объявление

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

но и эта строчка иногда оказывается «бессильной». И так, для разделения стилей для браузеров можно использовать 2 способа:

1. Которым я НЕ пользуюсь:
Делаем 2 разных файла CSS в котором используются одинаковые названия классов стилей. В HTML странице сначала объявляется CSS для Opera, Firefox и Safari:

Затем, пишем Vbscript, который работает только в Internet Explorer:

Бразуеры Opera, Firefox и Safari не смогут выполнить этот код и пропустят, а IE выполнит и подключит оба CSS файла, но при обрабатывании класса, будет руководстоваться сначала вторым CSS (который подключен с помощью VBScript), и, если такой класс не описан, то первым (который жестко прописан в HTML

2. Этим способом я пользуюсь:
Так же делаем 2 разных файла CSS в котором используются одинаковые названия классов стилей. Затем в HTML странице используем JavaScript:

Как это работает?
Можете создать пустую HTML страницу со скриптом:

и открыть его разными браузерами. Строка UA будет указывать версию браузера и операционной системы, строка index - положение слова MSIE в строке. В IE index покажет "25". в остальных браузерах "-1" (это слово в строке UserAgent отсутствует). В предыдущем скрипте (во втором способе) идет проверка как раз на MS Internet Explorer.

К сожалению, ни один из этих способов не сработает на браузере в котором отключены скрипты ;-)

6 Comments

by Adel Shigabutdinov on Декабрь 14, 2007 • Permalink

Posted in Дизайн, Программирование

Posted by Adel Shigabutdinov on Декабрь 14, 2007

http://www.drfaust.ru/post/2007/12/14/d0a0d0b0d0b7d0bdd18bd0b5-css-d0b4d0bbd18f-d180d0b0d0b7d0bdd18bd185-d0b1d180d0b0d183d0b7d0b5d180d0bed0b2.aspx

6 Comments

Olya
/ 21.12.2007

Спасибо за подробные разъяснения, статья реально помогла в вопросе кросбраузерных сайтов!
Теперь хоть более понятно в каком направлении дальше искать инфу…

Ответить
Край Земли
/ 20.01.2008

Неплохо неплохо, будем изучать.

Ответить
Artem
/ 21.01.2008

Я обычно верстаю в трех браузерах одновременно, стараюсь кроссбраузерности добиться в самом HTML, в исключительных случаях применяю CSS-хаки, но это когда просто нет другого выхода.

Ответить
васька
/ 26.01.2008

Я только начинающий поэтому огромное спасибо за инфу.

Ответить
mila
/ 14.02.2008

Интересная информация.

А как подключить стили в WordPress?
Подскажите, пожалуйста.
Описаным способом не получилось.

Спасибо!

Мила

Ответить
You K
/ 15.12.2011

Really a great article and its easy to see that you didnt just copy it!

Ответить