如何在不使用 CSS Calc() 的情況下實現動態寬度調整以實現更廣泛的瀏覽器相容性？

CSS Calc 的替代品

CSS calc() 函數方便地允許動態調整元素的寬度。雖然受現代瀏覽器支持，但它缺乏與 IE 5.5 及更低版本等舊版本的兼容性。

要解決此問題並擴展對 Opera 和 Android 瀏覽器的支持，請考慮改用 box-sizing: border-box。

例如，假設一個 div 類別為“sideBar”，假設寬度為 300px。若要根據側邊欄寬度動態調整「內容」div 的寬度，請避免使用：

.content {
  width: calc(100% - 300px);
}

而是套用以下樣式：

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

定義固定寬度對於側邊欄並將box-sizing: border-box 套用至內容div，內容的寬度會根據側邊欄的寬度自動調整，因此無需calc()。這種方法確保了更廣泛的瀏覽器的兼容性，包括舊版本的 IE、Opera 和 Android 瀏覽器。

以上是如何在不使用 CSS Calc() 的情況下實現動態寬度調整以實現更廣泛的瀏覽器相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！