Quelle est la meilleure alternative à la fonction calc() de CSS pour la compatibilité des navigateurs ?

Alternative à la fonction Calc pour CSS

La fonction calc() offre un moyen pratique de calculer dynamiquement des valeurs en CSS. Cependant, il peut ne pas être pris en charge dans les navigateurs plus anciens comme IE 5.5 et certains navigateurs mobiles. Voici une approche alternative qui fonctionne mieux sur un plus large éventail de navigateurs :

Box-sizing : border-box

Presque toutes les instances de calc(100% - ) peut être remplacé en définissant box-sizing: border-box; sur un élément et padding ou margin sur l'autre. Par exemple, pour définir dynamiquement la largeur d'un élément div :

Approche originale (avec calc()) :

width: calc(100% - 500px);

Approche alternative (sans calc() :

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}

.content {
  padding-left: 300px;
  width: 100%;
  box-sizing: border-box;
  background: wheat;
}

Compatibilité :

Cette approche alternative prend en charge la plupart des principaux navigateurs, notamment IE 5.5 et versions ultérieures, Opera et les navigateurs Android. .

Remarque : Cette solution repose sur une valeur précise des dimensions de l'élément. Si les dimensions de l'élément sont fluides ou ne peuvent pas être déterminées à l'avance, calc() peut être la seule option viable.

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!