Можно ли как-то задать стили только для IE?

Question

[danilr]

В эксплоере странное поведение, во всех браузерах всё ровно, а в эксплоере скачет - можно ли как-то сделать, например, margin-bottom: 0 и display: inline-block , а в остальных браузерах margin-bottom : 20px, display: flex?

Answer 1

[WapSter]

@supports

Comments

[danilr]

прочитал, но это же только проверка на поддерживаемость. IE поддерживает flex-box, но в то же время выходит у него всё криво. Также он поддерживает и margin, но в нём мне надо другое значение.
Использую less.

.pagination {
    display: flex; 
    margin-bottom: 10px;

    display: inline-block; // свойства только для IE
    margin-bottom: 0; // свойства только для IE

Если я ошибаюсь, то как это записать в моём случае?

[Rustam Bainazarov]

Тимур Турсунбаев, IE не поддерживает @supports.

danilr, вы препроцессор используете, как я понимаю? Если SCSS, то так:

.pagination {
    display: flex; 
    margin-bottom: 10px;
    
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        display: inline-block;
        margin-bottom: 0; 
    }

}

Если просто CSS, то так:

.pagination {
    display: flex; 
    margin-bottom: 10px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .pagination {
        display: inline-block;
        margin-bottom: 0; 
    }
}

А вообще, если вы верстаете под IE11, то он спокойно поддерживает большинство решений на flex. Иными словами, flexbox в 99% случаев в IE11 не требует чего-то уникального.

[WapSter]

Рустам Байназаров, вот именно то что он его не поддерживает, можно смело использовать

[Rustam Bainazarov]

Тимур Турсунбаев, ну это тогда надо весь нормальный код оборачивать в @supports. Не очень хорошо это.

[WapSter]

Рустам Байназаров, ну да, печально конечно, но ведь "работает") И это даже не костыль.

[Rustam Bainazarov]

Тимур Турсунбаев, ну лучше тогда ту штуку сверху использовать, что я прислал, так логичнее. Она тоже работает.

[WapSter]

Рустам Байназаров, да я проверил отлично себя показала, учту на будущее, хотя на врятли давно гриды используем, но все равно спасибо

[Rustam Bainazarov]

Тимур Турсунбаев, если придется поддерживать IE11 в проекте, то о Grid можно забыть :))

У меня пока все проекты требуют его поддержки, к сожалению.

Answer 2

[Максим]

Вот это для 10-11 Edge

@media all and (-ms-high-contrast:none) {
     *::-ms-backdrop, .header { max-width: 100%; overflow: hidden;} /* IE11 */
     *::-ms-backdrop, .header-slider { transform: translate(0, -140px); } /* IE11 */
     *::-ms-backdrop, .header-slider_navigation { transform: translate(-50%, -140px); } /* IE11 */
     }

Comments

[danilr]

буду признателен за разъяснение - зачем тут media и что значит -ms-high-contrast, *::-ms-backdrop

[Максим]

danilr, в ie все правила начинаются с *::-ms-backdrop
а ms-high-contrast это вообще только для ie по другому только js

[danilr]

Максим Ленский, а медиа зачем? Почему тогда supports не использовать?

[Максим]

danilr, так это работает - ie узнаёт о стилях для него через медиа запрос

[Rustam Bainazarov]

danilr, IE вообще не поддерживает @supports, поэтому всех хаки для IE построены на @media.

Код автора ответа — правильный, но этот хак можно упростить ещё:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .class {
     /* Тут стили, которые будут работать только в IE */
   }
}

[danilr]

Рустам Байназаров, спасибо!)