web-dev-qa-db-fra.com

Appliquer uniquement à IE 11 dans la requête média pour la taille de l'écran

J'ai actuellement une requête de média spécifique à la largeur suivante.

 @media only screen and (max-width: 1920px) {
    .toggleMultiSelect .filter {
        width: 566px;
    }
 }

Mais la largeur de '. ToggleMultiSelect .filter' change dans IE de Chrome/Firefox. Donc, fondamentalement, vous devez appliquer une largeur différente pour la même classe css en 1920px pour IE À partir de la recherche Stackoverflow, j'ai trouvé que IE un comportement spécifique peut être obtenu comme ci-dessous.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .toggleMultiSelect .filter {
        width: 575px;
    }
}

Alors maintenant, je dois atteindre à la fois la résolution et la classe css. 575px uniquement la largeur doit s'appliquer à IE et Chrome ou firefox devrait obtenir 566px.

Merci d'avance pour votre aide.

cssmedia-queriesinternet-explorer-11
9
Luke

Utilisez le CSS ci-dessous dans la requête média

IE 10 et supérieur

_:-ms-lang(x), .ie10up { 
       property:value; 
    }

IE 11 et supérieur

_:-ms-fullscreen, :root .CLASS_NAME { 
       property:value; 
     }
14
Shahil M

Avez-vous essayé de les combiner comme ça -

@media only screen and (max-width: 1920px) {
    .toggleMultiSelect .filter {
        width: 566px;
    }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       .toggleMultiSelect .filter {
         width: 575px;
       }
    }

 }

Cela peut fonctionner am Not bien sûr, j'utilise Mac donc aucun moyen de tester, mais je pense que cela fonctionnera pour vous. J'espère que cela vous a été utile.

4
weBBer