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，导致尺寸错乱。
