ie6–8 不支持 position: sticky、transform、will-change 等 css3 定位相关属性，z-index 在 ie6–7 对非定位元素无效，且存在绝对定位参考错乱、box-sizing 渲染不一致等问题；现代浏览器中 sticky 与 transform 的兼容性仍有差异。
IE6–8 不支持的 CSS3 定位相关属性
现代布局中常用的 position: sticky 在 IE 全系（包括 IE11）中完全不被识别，连降级 fallback 都不会触发——它会被直接忽略。同理，z-index 在 IE6–7 中对非定位元素（即 position: static）无效；在 IE8 中虽支持，但若父容器未声明 position: relative 或其他非 static 值，子元素的 z-index 可能失效或层级错乱。
以下属性在 IE6–8 中不可用，且无 polyfill 能真正模拟行为：
-
position: sticky（现代浏览器中用于“吸附滚动”） -
transform配合position: absolute实现的精确定位（如transform: translate(-50%, -50%)居中），IE9+ 才支持transform，IE8 只认filter: progid:DXImageTransform.Microsoft.Matrix（极难维护） -
will-change: transform等性能提示属性，IE 完全无视
relative/absolute/fixed 在旧版 IE 中的典型错位现象
IE6 对 position: absolute 的“最近定位祖先”查找逻辑有缺陷：当父元素仅设 position: relative 但未设宽高时，IE6 可能回退到 body 作为参考，导致绝对定位元素飘到页面左上角。更隐蔽的是，IE6 下若父容器同时用了 float 和 position: relative，某些情况下会触发 hasLayout 问题，使 top/left 偏移量计算失准。
常见修复方式（仅限必须兼容 IE6–8 的场景）：
- 给相对定位父容器显式设置
height: 1%或zoom: 1触发 hasLayout - 避免在 IE6–7 中混用
float和position: absolute子元素 -
position: fixed在 IE6 中完全失效，需用 JavaScript 模拟（如监听scroll+ 动态改top），但会卡顿且不响应缩放
box-sizing 与定位盒子尺寸的隐性冲突
box-sizing: border-box 本身不影响定位类型，但它改变的是“定位偏移所依据的盒模型基准”。CSS2 默认是 content-box，而 CSS3 引入 border-box 后，top: 0 的绝对定位元素，其实际占据空间和边缘对齐位置会因父容器是否启用 border-box 而不同。尤其在 IE8 中，-ms-box-sizing 支持不完整，若混用 vendor prefix 和标准写法，可能造成渲染不一致。
实操建议：
- 统一在重置样式开头写：
*, *::before, *::after { box-sizing: border-box; }，并确保 IE8+ 能解析（IE8 支持标准box-sizing，无需前缀） - 避免在
position: absolute元素自身上同时设width和padding再依赖box-sizing: content-box做老式计算——现代代码应默认按border-box设计 - 注意：Safari 5.1–6.0 对
box-sizing在table元素上的支持异常，与定位无关但常一起出问题
现代浏览器中仍需留意的定位兼容细节
看似“已解决”的定位，在跨浏览器时仍有细微差异。例如 position: sticky 在 Safari 15.4 之前不支持 flex 容器内的子元素 sticky；Firefox 对 sticky 的 overflow 父容器判定比 Chrome 更严格（父级 overflow: hidden 会直接禁用 sticky 行为）。
另一个易忽略点：transform 会创建新的 stacking context，这会影响 z-index 层级关系——即使没写 z-index，加了 transform 的元素也可能盖过未加的兄弟元素，而这个行为在 IE11 和 Edge Legacy 中并不一致。
所以，不要假设“写了 position: relative 就一定有定位上下文”，也不要默认“sticky 在所有现代浏览器里表现相同”。真实项目里，最稳妥的方式是：用 @supports 检测 position: sticky，fallback 到 position: relative + JS 监听滚动，而不是靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
