Выравнивание тегов HR по ширине устройства не работает в браузере IE11

Question

Я добавил строку HR ниже некоторого контента, как показано ниже:

<style>
    .h-divider{border: 2px solid #f3a51f; width:80px;}

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .h-divider{margin-right:0;}
    }
    @media (min-width: 768px){
    .h-divider{margin-right:0;}
    }
    </style>


<hr class="h-divider"/>

Здесь я хочу, чтобы Hr (делитель) был на правой стороне на больших устройствах, и это должно быть в центре (по умолчанию) ) на небольших устройствах.

Вышеуказанное css правильно работает в Chrome и Firefox, но не отображается в браузере IE (11). Пожалуйста, совет.

Answer 1

Я протестировал проблему с IE 11, и я вижу проблему.

В результате тестирования я заметил некоторые вещи, которыми я здесь делюсь.

1. Ваш Медиа-запрос не выполняется в браузере IE 11.

В ходе тестирования я обнаружил, что ниже приведен код, который работает только для браузера IE 11.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}

Так что вам нужно использовать этот код для браузера IE 11.

Я заметил, что ширина: 20% играет здесь какую-то роль.

Когда вы используете ширину, она не будет правильно отображать правое поле, и линия будет отображаться в середине окна.

Чтобы увидеть эффект правого поля, вам нужно убрать ширину и увеличить правое поле примерно до 100 пикселей, чтобы увидеть заметную разницу.

Я заметил, что вложенный медиазапрос также не работает в браузере IE 11. Таким образом, вы не можете поставить запрос для проверки минимальной ширины. Если вы поставите его снаружи, то он также не будет работать, поскольку только вышеупомянутый медиа-запрос работает для IE 11.

. В этой ситуации я предлагаю вам использовать упомянутый медиа-запрос для IE 11. Не используйте ширину в нем, а просто установите необходимое правое поле. Вы можете попытаться сделать несколько тестов, обернув HR с DIV.