2017-11-23 1 views
1

Ich versuche, das CSS-Styling NUR auf Internet Explorer 10> zu ändern. Ich verwende Media Query, aber es funktioniert nicht.Medienabfrage NUR für IE

Ich habe IE und die Medienabfrage Zeile mit der Änderung in der CSS-Datei angezeigt, aber aus irgendeinem Grund funktioniert es nicht.

Was soll ich tun, um nur meine CSS-Stil auf IE zu ändern?

//// MEDIA QUERY /// 
 
@media screen and (-ms-high-contrast: active), 
 
screen and (-ms-high-contrast: none) { 
 
    body { 
 
    background-color: red !important; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 1200px) {} 
 

 
@media only screen and (max-width: 992px) {} 
 

 
@media only screen and (max-width: 768px) {} 
 

 
@media only screen and (max-width: 480px) {}
<body> 
 

 
    <div> HELLO </div> 
 

 
</body>

+0

Was würden Sie brauchen, stattdessen ist ein Merkmal für einen hohen Kontrast zu erkennen, zu schlecht CSS Feature-Erkennung noch nicht in IE (https arbeiten: // developer. mozilla.org/en-US/docs/Web/CSS/%40supports), könnten Sie die Feature-Erkennung in JavaScript durchführen und einen geeigneten Klassennamen festlegen. –

+0

Bitte ändern Sie Ihren Titel und Text. Aus den Kommentaren ist klar, dass dies in * Edge * funktionieren soll, was sich von IE unterscheidet. –

+0

gut, wenn ich meine Edge meine ich IE und Edge – Mostaza

Antwort

1

es nur erklären, etwas anders und es wird funktionieren.

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

Sie hatten doppelte Deklaration nach Komma. es in IE11 getestet und es funktioniert

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
 
    body { 
 
    background-color: red !important; 
 
    } 
 
} 
 

 
@supports (-ms-ime-align: auto) { 
 
    body { 
 
    background-color: red !important; 
 
    } 
 
}
<div> HELLO </div>

+0

Hallo. Ich habe es gerade ausprobiert und leider funktioniert es nicht. – Mostaza

+0

versuche es noch einmal, funktioniert in meinem IE11 https://i.imgur.com/vT4emrx.png –

+0

Ich habe es mit Microsoft Edge versucht und ich kann den roten Hintergrund nicht sehen. (Ich habe Ihr Codebeispiel kopiert und eingefügt) – Mostaza