Pourquoi ma disposition de grille CSS ne s'affiche-t-elle pas dans IE11, même avec des préfixes ?

La disposition de la grille CSS ne s'affiche pas dans IE11, malgré les préfixes

Comprendre le problème

Dans la disposition de la grille CSS, l'utilisation des préfixes -ms est destiné à garantir la compatibilité avec Microsoft Edge et IE11. Cependant, lorsque cela ne parvient pas à restituer la grille dans IE11, nous examinons les raisons sous-jacentes.

Implémentation limitée des spécifications de grille d'IE11

Le nœud du problème réside dans IE11. adhésion à une ancienne version de la spécification Grid. Par conséquent, plusieurs propriétés CSS utilisées dans le code HTML et SCSS fourni ne sont pas reconnues par IE11, même avec les préfixes -ms.

Défis spécifiques

1. repeat() : IE11 ne prend pas en charge la fonction repeat() dans les colonnes de modèle de grille et lignes de modèle de grille. Cela nécessite d'utiliser à la place des définitions explicites de colonnes et de lignes.
2. span : Le mot-clé span pour grid-column-span et grid-row-span n'est pas présent dans l'ancienne spécification. IE11 nécessite l'utilisation des propriétés équivalentes grid-column-span et grid-row-span.
3. grid-gap : La propriété grid-gap et ses formes longues ne sont pas prises en charge dans IE11. . Des méthodes alternatives, telles que les marges, sont nécessaires pour l'espacement entre les éléments de la grille.
4. Placement automatique des éléments de la grille : IE11 ne prend pas en charge le placement automatique des éléments de la grille. Pour garantir un placement correct, définissez explicitement les propriétés -ms-grid-row et -ms-grid-column pour chaque élément de la grille.

Code révisé pour la compatibilité IE11 :

Le code fourni doit être mis à jour comme suit pour fonctionner dans IE11 :

    .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;
    }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!