Warum wird mein CSS-Rasterlayout in IE11 nicht gerendert, selbst mit Präfixen?

CSS-Rasterlayout wird in IE11 trotz Präfixen nicht gerendert

Verstehen des Problems

Im CSS-Rasterlayout die Verwendung der Präfixe -ms soll die Kompatibilität mit Microsoft Edge und IE11 sicherstellen. Wenn das Raster jedoch nicht in IE11 gerendert werden kann, untersuchen wir die zugrunde liegenden Gründe.

Eingeschränkte Rasterspezifikationsimplementierung von IE11

Der Kern des Problems liegt in IE11 Einhaltung einer älteren Version der Grid-Spezifikation. Folglich werden mehrere CSS-Eigenschaften, die im bereitgestellten HTML- und SCSS-Code verwendet werden, von IE11 nicht erkannt, selbst mit den Präfixen -ms.

Spezifische Herausforderungen

1. repeat(): IE11 unterstützt die Funktion „repeat()“ in Grid-Template-Columns und nicht Rastervorlagenzeilen. Dies erfordert stattdessen die Verwendung expliziter Spalten- und Zeilendefinitionen.
2. span: Das Schlüsselwort „span“ für „grid-column-span“ und „grid-row-span“ ist in der älteren Spezifikation nicht vorhanden. IE11 erfordert die Verwendung der entsprechenden Eigenschaften „grid-column-span“ und „grid-row-span“.
3. grid-gap: Die Eigenschaft „grid-gap“ und ihre Langhandformen werden in IE11 nicht unterstützt . Für den Abstand zwischen Rasterelementen sind alternative Methoden wie Ränder erforderlich.
4. Automatische Platzierung von Rasterelementen: IE11 unterstützt keine automatische Platzierung von Rasterelementen. Um eine ordnungsgemäße Platzierung sicherzustellen, definieren Sie explizit die Eigenschaften -ms-grid-row und -ms-grid-column für jedes Rasterelement.

Überarbeiteter Code für IE11-Kompatibilität:

Der bereitgestellte Code muss wie folgt aktualisiert werden, damit er in IE11 funktioniert:

    .grid {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
      -ms-grid-rows: 270px 270px 270px 270px;
      grid-gap: 30px;
    }

    .grid .grid-item {
      -ms-grid-column: span 2;
      -ms-grid-row: span 2;
    }

Das obige ist der detaillierte Inhalt vonWarum wird mein CSS-Rasterlayout in IE11 nicht gerendert, selbst mit Präfixen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!