Existe-t-il une alternative compatible avec les navigateurs à CSS Calc pour les calculs de dimensions dynamiques ?

Alternative à CSS Calc

CSS Calc est un outil puissant pour le calcul de dimensions dynamiques, mais sa prise en charge est limitée pour les anciens navigateurs. Une alternative à Calc qui offre une compatibilité plus large avec les navigateurs est la propriété box-sizing.

Utilisation de box-sizing

La propriété box-sizing détermine comment la largeur et la largeur d'un élément la hauteur est calculée. Par défaut, les navigateurs utilisent le modèle « content-box », où la largeur et la hauteur incluent uniquement les dimensions du contenu. Cependant, définir box-sizing sur "border-box" indique au navigateur d'inclure le remplissage et les bordures dans les calculs de largeur et de hauteur.

Considérez le code suivant :

.element {
  width: calc(100% - 500px);
}

Ce code de manière dynamique définit la largeur d'un élément comme étant la largeur de la fenêtre moins 500 px. Cependant, dans IE 5.5 et versions antérieures, ce code ne fonctionnera pas.

Au lieu de cela, l'utilisation du dimensionnement de la boîte produit le même effet :

.element {
  width: 100%;
  padding: 0 250px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Ici, nous définissons la largeur à 100 %, mais nous ajoutons 250px de remplissage gauche et droit. Ensuite, nous utilisons box-sizing: border-box pour inclure le remplissage dans le calcul de la largeur, ce qui donne la même largeur effective que l'exemple calc().

Prise en charge supplémentaire du navigateur

La propriété box-sizing prend en charge Opera, les navigateurs Android et IE 6 et versions ultérieures. Cela fournit une méthode fiable et cohérente pour les calculs de dimensions dynamiques sur un large éventail de navigateurs.

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!