Использование разных стилей CSS для определенных браузеров

StackOverflow https://stackoverflow.com/questions/1637534

  •  07-07-2019
  •  | 
  •  

Вопрос

Как лучше всего иметь отдельный CSS для IE и других браузеров? Я думаю о том, чтобы просто ориентироваться на пользователей IE, Firefox и Safari. Особенно сейчас с поддержкой CSS3 в большинстве браузеров, кроме IE.

Различные способы сделать это, с которыми я сталкивался,

<Ол>
  • загрузка отдельных таблиц стилей условно используя <!--[if IE] >
  • Подчеркните взлом и различные другие встроенные взломы IE

    • Я предпочитаю (2), так как (1) это дополнительная работа, особенно при разработке. Но (2), кажется, не работает все время. Какой самый эффективный способ?

    Это было полезно?

    Решение

    У меня была бы одна таблица стилей, которую можно найти в верхней части документа.

    под этим сделай свое        [! - [если IE]] условная таблица стилей.

    Здесь просто переопределите стили, которые вызывают проблемы в IE. - последним выбранным стилем для определенного класса будет тот, за которым последуют.

    Другие советы

    Наша команда работает с CSS по следующим трем правилам:

    <Ол>
  • Убедитесь, что общие / общие файлы CSS работают так, как они должны, во всех браузерах настолько близко, насколько это возможно.
  • Обрабатывать все IE " ошибки " в отдельных файлах управляйте загрузкой таблиц стилей с условиями IE.
  • Хакерство не допускается, если невозможно заставить его работать по первым двум правилам.

    • Я согласен с тем, чтобы хранить все ваши основные CSS в одном файле. Если вы используете ASP.NET, вы можете использовать WebHandler для управления тем, какой CSS на самом деле отправляется. Я уверен, что другие языки имеют похожие решения. Это позволяет вам отправлять только то, что вам нужно, и разрешить его кэширование. Другое преимущество заключается в том, что вы можете комбинировать несколько CSS-файлов (если вы так делаете) и представлять только один. Это хорошая практика, поскольку вы уменьшаете количество запросов к веб-серверу.

    Затем вы можете написать что-то вроде [if lt IE 8] margin: 0px; и он не будет отправлен в IE8 или FF и т. д.

    Если вы используете только HTML, вы должны соблюдать условия стиля [! - [if IE]], упомянутые выше.

    Мы используем WebHandler в нашем очень большом проекте, и я бы никогда больше этого не сделал.

    См. http://www.conditional-css.com/download . Он доступен для PHP, C # и C

    Удачи. 

    <!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

    Этот трюк широко использует Яндекс (он же " русский google ") для сокращения HTTP-запросов. market.yandex.ru , например, используя это.

    Вы также можете использовать этот способ; иногда условия могут не работать, когда нам нужно написать стили в середине кода. 

    <?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>

    Проверьте $browser с помощью:

    IE & # 8211; & # 8220; MSIE # 8221 &;

    Firefox & # 8211; & # 8220; Firefox # 8221 &;

    Safari & # 8211; & # 8220; Safari # 8221 &;

    Opera & # 8211; & # 8220; опера # 8221 &;

    Chrome & # 8211; & # 8220; # 8221 Chrome &;

    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top