IE浏览器中width:100%失效如何修复？绝对定位元素宽度异常处理

这问题我在做IE兼容项目时踩过好几次坑，绝对定位元素的width:100%在IE里的表现确实和现代浏览器有差异，咱们一步步来解决它。

先拆解你的问题：你给main设置了position: relative，所以内部绝对定位的div的包含块是main。但在IE中，如果main没有显式设置宽度，它的宽度可能不会自动撑满父容器（比如body），导致div的width:100%只能取main的内容宽度，而非你期望的视口宽度。另外，100vw的问题是它包含了垂直滚动条的宽度，页面有滚动条时会出现横向滚动；calc(100vw - 滚动条宽度)又没法适配无滚动条的场景，确实不太好用。

给你两个可靠的解决方案：

方案一：显式设置包含块的宽度 #

让html、body和main都撑满视口宽度，同时用box-sizing确保宽度计算的一致性：

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}
main {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
div {
  position: absolute;
  height: 300px;
  background-color: red;
  width: 100%;
  box-sizing: border-box;
}

这样div的width:100%就会继承main的宽度（即完整视口宽度），在IE下也能正常生效。

方案二：用left/right拉伸代替width:100% #

这是我更推荐的方案，直接避开width的兼容性坑：给绝对定位的div设置left: 0和right: 0，它会自动拉伸到包含块的左右边缘，所有IE版本都能可靠识别：

main {
  position: relative;
}
div {
  position: absolute;
  height: 300px;
  background-color: red;
  left: 0;
  right: 0;
}

这个写法更简洁，不用考虑包含块的宽度设置，直接让元素占满水平空间。

最后别忘了关键前提：确保页面处于IE标准模式，也就是在HTML头部添加<!DOCTYPE html>声明。如果没有DOCTYPE，IE会进入怪异模式，盒模型和定位逻辑都会出现各种奇怪问题，很多兼容性坑都是因为这个导致的。

内容的提问来源于stack exchange，提问作者Jack Shcherbakov