Was ist die beste Alternative zur CSS-Funktion calc() für die Browserkompatibilität?

Alternative zur Berechnungsfunktion für CSS

Die Funktion calc() bietet eine praktische Möglichkeit, Werte in CSS dynamisch zu berechnen. Es wird jedoch möglicherweise in älteren Browsern wie IE 5.5 und bestimmten mobilen Browsern nicht unterstützt. Hier ist ein alternativer Ansatz, der in einer größeren Auswahl an Browsern besser funktioniert:

Box-sizing: border-box

Fast jede Instanz von calc(100% - ) kann durch die Einstellung box-sizing: border-box; auf einem Element und Polsterung oder Rand auf dem anderen. Um beispielsweise die Breite eines div-Elements dynamisch festzulegen:

Ursprünglicher Ansatz (mit calc()):

width: calc(100% - 500px);

Alternativer Ansatz (ohne calc()):

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

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

Kompatibilität:

Dieser alternative Ansatz unterstützt die meisten gängigen Browser, einschließlich IE 5.5 und höher, Opera und Android-Browser .

Hinweis: Diese Lösung basiert auf einem genauen Wert für die Abmessungen des Elements. Wenn die Abmessungen des Elements fließend sind oder nicht im Voraus bestimmt werden können, ist calc() möglicherweise die einzig praktikable Option.

Das obige ist der detaillierte Inhalt vonWas ist die beste Alternative zur CSS-Funktion calc() für die Browserkompatibilität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!