IE11 не применяет медиа-запрос - PullRequest
Новая
       16

IE11 не применяет медиа-запрос

1 голос
/ 24 марта 2020

В p-dialog, который имеет класс, он отлично работает на Chrome, Firefox и IE Edge, но не работает должным образом в IE <= 11. </p> 

<p-dialog [baseZIndex]="10000" [contentStyle]="{'overflow':'visible'}" responsive="true" modal="true" #noteView
      [(visible)]="displayModal" [appendTo]="'body'" (onShow)="onAfterShow($event)" class="example-dialog">
</p-dialog>

и это медиа-запрос на моем css

@media all and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 ::ng-deep .example-dialog .ui-dialog {
      width: 60%;
      height: 50%;
      overflow-y: auto;
 }
}

Как я могу решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

В конце концов я решил это, удалив атрибут [appendTo] = "'body'" . В моем случае, я не знаю, почему на IE DOM я не мог видеть <p-dialog>, а затем не мог правильно применить css.

0 голосов
/ 25 марта 2020 
@media all and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}

После тестирования вышеуказанный стиль CSS применяется к браузеру IE10 +. Вы можете проверить следующий пример: 

<style>
    @media all and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .content {
            width: 100%;
            height: 50%;
            overflow-y: auto;
            background-color: darkseagreen;
        }
    }
</style>
<div class="content">content</div>

Более подробную информацию об использовании стиля CSS для обнаружения браузера, пожалуйста, проверьте по этой ссылке: Как настроить таргетинг только на IE (любая версия) в пределах таблица стилей?

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

@media all and (min-width: 1024px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .example-dialog {
      width: 60%;
      height: 50%;
      overflow-y: auto;
 }
}
...