ie8不支持border-radius，加任何前缀均无效；必须降级为png圆角图、svg或放弃圆角。
直接说结论：别靠人肉加前缀、别迷信 reset.css、别无脑用 polyfill。现代项目里，CSS 兼容性问题 90% 出在「目标浏览器没对齐」和「特性使用超出支持范围」，而不是代码写得不对。
为什么 border-radius 在 IE8 里不生效？
因为 IE8 根本不识别这个属性——它连 CSS3 的边都没摸到。不是你漏写了 -ms-border-radius，而是 IE8 压根没实现这个标准。
-
border-radius在 IE9+ 才开始支持（无前缀），IE8 及以下完全无视，加任何前缀都无效 - 查兼容性必须看 caniuse.com/border-radius，而不是凭经验“试试 -webkit-”
- 如果项目必须支持 IE8，就得换方案：用 PNG 圆角图、SVG 蒙版，或直接放弃圆角视觉（优雅降级）
display: flex 在 IE10/IE11 中错位或失效
IE10 只支持旧版 Flex 语法（display: -ms-flexbox），IE11 支持部分新版但有严重 bug（比如 flex-wrap: wrap + align-content 组合会崩溃）。
- 必须同时写三套：
display: -webkit-box（iOS6/Safari6）、display: -ms-flexbox（IE10）、display: flex（标准） - IE11 不支持
flex: 0 1 auto这种简写，得拆成flex-grow: 0; flex-shrink: 1; flex-basis: auto - 避免在 IE 中用
align-content或gap，它们在 IE 完全不可用
为什么 autoprefixer 没给你加 -webkit-？
因为你配置的浏览器范围（browserslist）没覆盖到需要前缀的版本。它不是“有新属性就加前缀”，而是“按目标环境决定是否加、加哪些”。
- 检查项目根目录的
.browserslistrc或package.json中的browserslist字段，比如last 2 versions不会包含 IE11，自然不加-ms- - IE11 需要显式写
ie 11，iOS Safari 12.1 需要safari 12.1，不能靠模糊描述 - 运行
npx autoprefixer --info可直接看到当前配置下哪些属性会被加前缀
normalize.css 真的比 reset.css 更安全吗？
是，但只在「你理解它做了什么」的前提下。它不会清掉所有默认样式，比如 <button></button> 的粗体、<input> 的边框、<table> 的间距都保留了——这些正是某些老浏览器（尤其是 IE）依赖的渲染锚点。<ul>
<li>用 <code>normalize.css 后仍需手动重置 box-sizing：* { box-sizing: border-box; }，否则 IE8/9 的盒模型计算还是错的
:focus-visible 在 Safari 15.4 之前不支持，::placeholder 在 IE10/11 只认 :-ms-input-placeholder
normalize.css 里关于 html 的 font-size 重置，移动端 rem 基准可能在 iOS Safari 上偏大真正卡住人的地方，从来不是“怎么加前缀”，而是没在写第一行 CSS 前就想清楚：用户里还有多少人在用 IE11？CanIUse 上那个红色区块到底影响多大？gap 看似方便，但删掉它之后布局是否还能自洽？这些判断没法交给工具，得人来拍板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
