Comment obtenir la compatibilité entre navigateurs pour les calculs CSS sans calc() ?

Revisiter la compatibilité avec les navigateurs de CSS Calc

Bien que la fonction CSS calc() offre un moyen pratique d'effectuer des calculs pour un style dynamique dans les navigateurs modernes, sa compatibilité avec les anciens navigateurs peut poser un défi. En particulier, IE 5.5 et versions ultérieures nécessitent une approche alternative.

Méthode d'expression : une option limitée

La méthode expression() est une option de secours spécifique au navigateur pour IE. Cependant, il présente des limites importantes et des problèmes de sécurité potentiels. Il est recommandé d'éviter de l'utiliser pour les calculs de largeur dynamiques.

Box-sizing : une solution complète

Au lieu de calc(), pensez à utiliser box-sizing : border -boîte en conjonction avec le rembourrage. Cette approche est largement compatible et permet un contrôle précis de la largeur d'un élément tout en tenant compte de ses bordures et de ses remplissages.

Exemple : Remplacement de calc() par box-sizing

Supposons que nous ayons une barre latérale d'une largeur fixe de 300 px et que nous souhaitions redimensionner dynamiquement la zone de contenu principale pour occuper l'espace restant :

Utiliser calc() :

.content {
  width: calc(100% - 300px);
}

Utilisation du dimensionnement de la boîte et du remplissage :

.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  box-sizing: border-box;
  background: wheat;
}

Cette approche offre une compatibilité entre navigateurs et élimine le besoin de la fonction calc().

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!