Comment puis-je obtenir un dimensionnement dynamique sans utiliser CSS Calc() dans les anciens navigateurs ?

Alternative à CSS Calc

La fonction CSS calc() fournit un moyen pratique d'effectuer des calculs mathématiques dans les règles CSS. Cependant, pour les navigateurs existants et certains navigateurs mobiles, sa prise en charge est limitée. Cet article explore une approche alternative pour obtenir un dimensionnement dynamique sans utiliser calc(), en ciblant particulièrement IE 5.5 et supérieur, Opera et le navigateur Android.

Alors que la propriété expression() peut être utilisée dans IE-OLD pour prend en charge la syntaxe de type calc, elle est obsolète et des problèmes de sécurité surviennent lors de son utilisation. Pensez plutôt à adopter la propriété CSS box-sizing avec la valeur border-box. Cette approche implique d'utiliser le remplissage et la marge, plutôt que de soustraire de la propriété width, pour obtenir les dimensions souhaitées.

Par exemple, prenons l'exemple fourni dans la question d'origine, où une barre latérale avec une largeur fixe affecte la largeur du contenu adjacent. Au lieu d'utiliser width: calc(100% - 300px) sur l'élément de contenu, nous pouvons obtenir le même effet avec le code suivant :

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

En définissant box-sizing : border-box, la largeur de l'élément inclut son remplissage et sa bordure, plutôt que de les traiter comme un espace supplémentaire en dehors du modèle de boîte de l'élément. Cela permet au padding-left de réduire efficacement la largeur utilisable de l'élément de contenu sans affecter sa largeur réelle telle que déclarée dans le CSS.

Cette approche est non seulement prise en charge dans IE 5.5 et versions ultérieures, mais également dans Opera et le navigateur Android, offrant une solution cohérente 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!