Wie kann ich in älteren Browsern eine dynamische Größenanpassung erreichen, ohne CSS Calc() zu verwenden?

Alternative zu CSS Calc

Die CSS-Funktion calc() bietet eine praktische Möglichkeit, mathematische Berechnungen innerhalb von CSS-Regeln durchzuführen. Für ältere Browser und einige mobile Browser ist die Unterstützung jedoch begrenzt. Dieser Artikel untersucht einen alternativen Ansatz zum Erreichen einer dynamischen Größenanpassung ohne Verwendung von calc(), insbesondere für IE 5.5 und höher, Opera und den Android-Browser.

Während die Eigenschaft expression() in IE-OLD verwendet werden kann, um Obwohl es eine calc-ähnliche Syntax unterstützt, ist es veraltet und seine Verwendung wirft Sicherheitsbedenken auf. Erwägen Sie stattdessen die Übernahme der CSS-Eigenschaft box-sizing mit dem Wert border-box. Bei diesem Ansatz werden Auffüllung und Rand verwendet, anstatt von der Breiteneigenschaft abzuziehen, um die gewünschten Abmessungen zu erreichen.

Nehmen wir zum Beispiel das in der ursprünglichen Frage bereitgestellte Beispiel, bei dem eine Seitenleiste mit einer festen Breite Auswirkungen auf die hat Breite des angrenzenden Inhalts. Anstatt width: calc(100% - 300px) für das Inhaltselement zu verwenden, können wir den gleichen Effekt mit dem folgenden Code erzielen:

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

Durch Festlegen von box-sizing: border-box, der Breite des Elements schließt seine Polsterung und seinen Rand ein, anstatt sie als zusätzlichen Raum außerhalb des Boxmodells des Elements zu behandeln. Dies ermöglicht es dem padding-left, die nutzbare Breite des Inhaltselements effektiv zu reduzieren, ohne seine tatsächliche Breite, wie im CSS deklariert, zu beeinträchtigen.

Dieser Ansatz wird nicht nur in IE 5.5 und höher, sondern auch in Opera und unterstützt den Android-Browser und bietet eine konsistente Lösung für eine Vielzahl von Browsern.

Das obige ist der detaillierte Inhalt vonWie kann ich in älteren Browsern eine dynamische Größenanpassung erreichen, ohne CSS Calc() zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!