IE8及更早版本完全不识别CSS3属性如border-radius、box-shadow等；IE10–IE11需用-ms-前缀且语法不同；iOS Safari 5.1和Android 4.3以下rem有计算偏差；IE10–IE11的linear-gradient须用旧语法并加-ms-前缀。
CSS3 属性在 IE8 及更早版本直接不生效
IE8 及以下版本根本不识别 border-radius、box-shadow、transform、transition 等 CSS3 属性，解析时会直接跳过整条声明。不是“显示异常”，而是“完全无视”。比如写 div { border-radius: 4px; background: linear-gradient(to right, red, blue); }，在 IE8 中只会渲染纯色背景，且边框仍是直角。
实操建议：
- 用
@supports做特性检测（但注意：IE 完全不支持@supports，所以它只适用于现代浏览器的渐进增强） - 对老浏览器降级处理——例如用图片替代圆角、用 JS 插件（如
PIE.js）模拟部分效果（已基本淘汰，仅作历史参考） - 明确项目兼容底线，若需支持 IE8，应避免使用这些属性，改用传统布局+切图方案
Flexbox 在 IE10–IE11 中必须加 -ms- 前缀且语法不同
IE10 使用旧版 Flexbox 语法（2012 年草案），IE11 开始支持标准语法，但仍需 -ms- 前缀才能触发其 flex 引擎。典型差异：display: flex 在 IE10 需写成 display: -ms-flexbox；justify-content: center 在 IE10 对应 -ms-flex-pack: center；flex: 1 在 IE10 要写成 -ms-flex: 1。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- IE10 下容器内子项全部堆在左上角（未设
-ms-flex-pack和-ms-flex-align） - IE11 中
flex-wrap: wrap不生效（漏写-ms-flex-wrap: wrap） - autoprefixer 默认不输出 IE10 旧语法，需显式配置
ie >= 10并启用flexbox: '2012'模式
rem 单位在 iOS Safari 5.1 和 Android 4.3 及更早版本存在计算偏差
这些旧版 WebKit 内核对 rem 的根字体大小继承逻辑有 Bug：当 html 元素的 font-size 通过 JS 动态设置后，部分元素（尤其是表单控件、伪元素）可能仍按初始 16px 计算 rem，导致尺寸错乱。
使用场景与规避方式：
-
移动端适配中若需兼容 Android 4.3，建议改用
vw+vh（iOS 6+/Android 4.4+ 支持良好）或 JS 动态写px - 若坚持用
rem，避免在::before/::after或input中混用复杂嵌套计算 - 测试时务必在真机（非模拟器）上验证表单控件、弹窗遮罩层等关键区域的尺寸是否一致
background: linear-gradient() 在 IE10–IE11 必须用 -ms- 前缀且不支持新语法
IE10/11 支持的是旧版语法：background: -ms-linear-gradient(top, #fff, #000)，其中方向参数只能是 top/bottom/left/right，不接受 to top 或角度写法（如 45deg）。写成标准语法会完全失效。
性能与兼容性影响：
- IE10 中该属性会触发硬件加速，但若同时叠加多个
-ms-linear-gradient（如作为background-image多层叠加），可能导致渲染卡顿 - Autoprefixer 默认为 IE10/11 输出
-ms-linear-gradient，但不会转换方向语法——你得手动把to bottom改成top，否则照样不生效 - 注意：IE9 及更早版本连这个前缀都不支持，只能回退到单色或 PNG 图片
真正麻烦的从来不是“某个属性要不要加前缀”，而是同一行样式在不同浏览器里被解释成完全不同的行为逻辑——比如 IE10 的 -ms-flex 和 Chrome 的 flex 表面相似，底层盒模型计算却差了一整个迭代周期。做兼容，本质是在和解析器的实现细节打交道。
