В internet explorer сайт читает 2 файла стилей style.css и ie.css. Как сделать чтоб читался только ie.css?

Question

[Евгений М]

Здравствуйте. Мне надо чтобы для всех браузеров стили читались из style.css а для internet explorer 7,8,9 из ie.css Подключил в header.php стили для старых версий IE так:

<!--[if lt IE 11]><link rel="stylesheet" type= "text/css" href="путь к файлу/ie.css"><![endif]-->

В итоге если пишу какой нибудь стиль к примеру .style1 {padding-top: 5%;} только в style.css то этот стиль считывает и браузер IE =( а если написать в ie.css .style1 {padding-top:10%;} то всё равно браузер ie считывает style.css а не ie.css
Но если в ie.css написать .style1 {padding:10%;] то уже считывает ie.css или если удалить стиль из style.css и прописать его в ie.css то читает с ie.css

Почему так? Или может можно запретить браузерам IE читать style.css ?

Answer 1

[Алексей Уколов]

Для IE 9 и ниже:

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

Для IE 10-11 и Edge - никак и не нужно этого делать. Никто уже очень давно не верстает отдельно под IE.

Comments

[Евгений М]

Для ie 10,11 поправил неточности через media запросы
Для старых версий нужно потому что могут посещать из корпоративного сектора где старенькие пк и по
Код который вы написали не работает у меня, тот что я писал в вопросе работает, подключает отдельный файл стилей, но беда в том что подключаются два стиля, а мне надо style.css отключить для IE браузеров старых ну или хотя бы чтобы в приоритете читался другой файл стилей сначала, т.е. ie.css

Answer 2

[grinat]

Для ie 10/11

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  // сюда стили
}

Которые ниже 10, понимают < !--[if lt выше нет.
Еще через js можешь определять версию и подключать стиль, либо на бэке смотреть user agent и подрубать стили.

Comments

[Евгений М]

так и сделал для 10,11 и там всё норм.
Версию старых определяю и стиль подключается новый ie.css
беда в том что style.css не отключается и стили которые прописаны там имеют высший приоритет по сравнению с отдельными подключенными

т.е. в отдельном подключенном файле стилей нужно прописывать стили с тем же названием что и в style.css как-то стили иначе, чтобы они работали. Пробую добавлять !important к стилям и никак. Новые подключаются стили, а старые не заменяются
К примеру .style1 {padding-top: 5%;} написан в style.css
Если написать .style1 {padding: 10%;} в ie.css то в internet explorer есть изменения
Но если написать в ie.css .style1 {padding-top: 1000%;} то изменений в internet explorer нет
Или .style1 {padding-top: 1000% !inportant;} тоже ничего не меняет

Answer 3

[Евгений М]

Проблема решена порядком описания.
Т.е. надо просто в файле стилей для IE то что надо заменить прописывать вначале, например

В style.css
.style {
margin: 0;
padding-top: 5px;
}
Если для IE нужно заменить отступ сверху то сработает так
В ie.css
.style {
padding-top: 10px!important;
margin: 0;
}
Соответственно если нужно заменить например margin то нужно просто всё поменять местами в обоих стилях.

Другой вариант в style.css добавить к названию стиля :root тогда такой стиль internet explorer не прочитает

:root .style {...}

Comments

[Алексей Уколов]

https://developer.mozilla.org/ru/docs/Web/CSS/Spec...