Pourquoi ma disposition de grille CSS ne fonctionne-t-elle pas dans IE11 et comment puis-je y remédier ?

Pourquoi la disposition en grille CSS ne fonctionne pas dans IE11 malgré les préfixes

La disposition en grille CSS a révolutionné la conception Web, fournissant un outil flexible et puissant pour créer des mises en page complexes. Cependant, il est important de noter qu'IE11 prend en charge une ancienne version de la spécification Grid, ce qui entraîne des problèmes de compatibilité.

Le problème : une spécification de grille obsolète

IE11 utilise un version de la spécification CSS Grid de 2011, antérieure à de nombreuses fonctionnalités modernes. Cela inclut les propriétés suivantes :

• fonction repeat()
• mot-clé span
• propriété grid-gap

Solution : Implémenter la syntaxe héritée

Pour garantir la compatibilité avec IE11, vous devez utiliser la syntaxe prise en charge par sa spécification Grid obsolète. Voici les modifications requises :

1. Remplacez Repeat() par un modèle de grille explicite

Au lieu d'utiliser la fonction Repeat(), définissez explicitement les colonnes et les lignes du modèle de grille :

.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

2. Remplacez span par grid-column-span et grid-row-span

Utilisez les propriétés suivantes pour répartir les éléments sur plusieurs colonnes ou lignes :

.grid-item.height-2x {
  grid-row-span: 2;
}
.grid-item.width-2x {
  grid-column-span: 2;
}

3. Gérer le placement automatique des éléments de la grille

IE11 ne prend pas en charge le placement automatique des éléments de la grille. Définissez explicitement la position de chaque élément à l'aide des propriétés grid-row et grid-column :

.grid-item {
  grid-row: 1;
  grid-column: 1;
}

4. Supprimer Grid-Gap

La propriété Grid-gap n'est pas prise en charge dans IE11. Utilisez des marges ou un remplissage pour séparer les éléments de la grille.

Conclusion

En implémentant ces modifications de syntaxe héritées, vous pouvez vous assurer que votre disposition de grille CSS fonctionne correctement dans IE11. N'oubliez pas que la prise en charge de ces propriétés obsolètes est limitée et qu'il est recommandé d'utiliser la spécification Grid moderne autant que possible.

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!