CSS
Взломы Internet Explorer
Поиск…
замечания
Эти «хаки» могут использоваться для таргетинга на конкретного браузера / клиента. Это можно использовать для устранения различий между браузерами, применяя стили в одной из этих оберток, перечисленных выше.
Режим высокой контрастности в Internet Explorer 10 и выше
В Internet Explorer 10+ и Edge Microsoft предоставляет селектор « -ms-high-contrast
media», чтобы отобразить параметр «Высокий контраст» в браузере, который позволяет программисту соответствующим образом корректировать стили своего сайта.
Селектор -ms-high-contrast
имеет 3 состояния: active
, black-on-white
и white-on-black
. В IE10 не + он также имел none
состояние, но больше не поддерживаются в Крае идти вперед.
Примеры
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
.header{
background: #fff;
color: #000;
}
}
Это изменит фон заголовка на белый, а цвет текста на черный, если активен режим высокой контрастности, и он находится в режиме « black-on-white
».
@media screen and (-ms-high-contrast: white-on-black) {
.header{
background: #000;
color: #fff;
}
}
Как и в первом примере, но это специально выбирает только white-on-black
состояние и инвертирует цвета заголовка на черный фон с белым текстом.
Дополнительная информация:
Документация Microsoft на -ms-high-contrast
Только Internet Explorer 6 и только Internet Explorer 7
Чтобы настроить таргетинг на Internet Explorer 6 и Internet Explorer 7, запустите свои свойства с помощью *
:
.hide-on-ie6-and-ie7 {
*display : none; // This line is processed only on IE6 and IE7
}
Не-буквенно-цифровые префиксы (кроме дефиса и подчеркивания) игнорируются в IE6 и IE7, поэтому этот хак работает для любой пары unsrefixed property: value
.
Только Internet Explorer 8
Чтобы настроить таргетинг на Internet Explorer 8, оберните селекторами внутри @media \0 screen { }
:
@media \0 screen {
.hide-on-ie8 {
display : none;
}
}
Все, что находится между @media \0 screen { }
, обрабатывается только I
Добавление поддержки встроенного блока для IE6 и IE7
display: inline-block;
Свойство display
со значением inline-block
не поддерживается Internet Explorer 6 и 7. Обход для этого:
zoom: 1;
*display: inline;
Свойство zoom
запускает функцию hasLayout
элементов и доступно только в Internet Explorer. *display
гарантирует, что недопустимое свойство выполняется только в затронутых браузерах. Другие браузеры просто игнорируют правило.