Rose debug info
---------------

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

Из-за разных интерпретаций 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:
<link rel="stylesheet" href="/allstyles.css" type="text/css" />

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

<script language="vbscript">
document.write("<link rel=""stylesheet"" href=""/IEstyles.css"" type=""text/css"" /> ")  

</script>

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

  1. Этим способом я пользуюсь:
    Так же делаем 2 разных файла CSS в котором используются одинаковые названия классов стилей. Затем в HTML странице используем JavaScript:
<script language="javascript" type="text/javascript">
     if ((navigator.userAgent.indexOf("MSIE")) >= "0")
    {
    document.write("<link rel=stylesheet href=/iestyle.css type=text/css />");    
    }
    else 
    {
     document.write("<link rel=stylesheet href=/allstyle.css type=text/css />");
    }
 </script>

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

 

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

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

6 комментариев
Olya 2007

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

Край Земли 2008

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

Artem 2008

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

васька 2008

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

mila 2008

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

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

Спасибо!

Мила

You K 2011

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