suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann ich CSS-Hacks verwenden, um nur Internet Explorer 11 anzusprechen und zu formatieren?

Wie kann ich CSS-Hacks verwenden, um nur Internet Explorer 11 anzusprechen und zu formatieren?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-04 18:55:16287Durchsuche

How Can I Use CSS Hacks to Target and Style Only Internet Explorer 11?

CSS-Hacks für IE 11

Um Rendering-Probleme in IE 11 zu beheben, ist es notwendig, CSS-Filter zu verwenden, die nur dieser Browser analysieren kann .

Microsoft-spezifisches CSS Regeln

Verwenden Sie eine Kombination aus Microsoft-spezifischen CSS-Regeln, um auf IE11 abzuzielen:

@media all and (-ms-high-contrast:none)
{
    /* IE10 styles */
    .foo { color: green }
    
    /* IE11 styles */
    *::-ms-backdrop, .foo { color: red }
}

Schlüsselprinzip

Diese Filter funktionieren, weil :

  • Wenn ein Benutzeragent (Browser) den Selektor nicht verstehen kann (da es ist kein gültiges CSS 2.1), es muss sowohl den Selektor als auch den nachfolgenden Deklarationsblock ignorieren.

Beispiel

Bedenken Sie den folgenden HTML- und CSS-Code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            @media all and (-ms-high-contrast:none)
            {
                .foo { color: green } /* IE10 */
                *::-ms-backdrop, .foo { color: red } /* IE11 */
            }
        </style>
    </head>
    <body>
        <div class="foo">Hi There!!!</div>
    </body>
</html>

In IE11 wird der Selektor *::-ms-backdrop erkannt und der Text „Hallo!!!“ wird rot angezeigt. In Nicht-IE-Browsern ignorieren sie diese Regeln einfach.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Hacks verwenden, um nur Internet Explorer 11 anzusprechen und zu formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html if for this microsoft
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich das Ausschneiden von Hintergrundbildern mit CSS „background-size: cover“ und „background-attachment: Fixed“ verhindern?Nächster Artikel：Wie kann ich das Ausschneiden von Hintergrundbildern mit CSS „background-size: cover“ und „background-attachment: Fixed“ verhindern?

In Verbindung stehende Artikel

Mehr sehen