如何在不使用 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中文网其他相关文章！