让 CSS 在 Chrome/Firefox/Edge/IE11 表现一致的核心是建立可验证、可继承的约束机制：用 Autoprefixer + browserslist + stylelint 禁用手工前缀，显式排除 IE11 不支持特性，通过 @supports 实现可控降级，搭配 Normalize.css 和 postcss-custom-properties 编译 CSS 变量。
怎么让 CSS 在 Chrome/Firefox/Edge/IE11 里表现一致
核心不是“写一堆 hack”，而是建立可验证、可继承、不依赖人肉记忆的约束机制。现代项目里，靠 *html 或 \9 这类 IE 专属 hack 已经失效——IE11 是最后一个支持条件注释的版本，且它对 Flexbox/Grid 的实现和现代浏览器仍有偏差，但已不再接受旧式 hack。
真正起效的做法是：用 Autoprefixer + 明确的 browserslist 配置 + 强制 lint 检查。比如在 package.json 中声明：
"browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not dead", "IE 11"]
这样 Autoprefixer 就知道哪些属性需要加前缀（如 -webkit-flex）、哪些可以直接用（如 gap 在 IE11 中不支持，就不会输出）。
- 必须禁用手动写前缀：所有
-webkit-、-moz-等前缀一律禁止出现在源码中，CI 流程里用stylelint插件stylelint-no-vendor-prefixes拦截 - IE11 不支持的特性要显式排除：比如
aspect-ratio、inset、contain，不能只靠 Autoprefixer，得配合caniuse-lite数据做构建时警告 - 避免“伪兼容”写法：例如用
display: flex同时又写display: -ms-flexbox—— IE11 的-ms-flexbox和标准flex行为不一致，反而引发错位
为什么 Normalize.css 比 Reset.css 更适合大型项目
因为大型项目里，组件复用率高、第三方库多，Reset.css 把所有默认样式归零后，反而导致每个组件都要重写基础排版（比如 button 的 font、line-height），而 Normalize.css 只修正已知的跨浏览器差异，保留合理的默认行为。
立即学习“前端免费学习笔记（深入）”；
例如：input[type="number] 在 Safari 中默认有上下箭头，在 Firefox 中没有，Normalize.css 会统一移除；但 h1 的字号缩放逻辑、audio 的默认边框等语义化表现会被保留，避免团队成员反复纠结“这个标题到底该不该加 margin”。
- 必须放在所有业务 CSS 之前加载，否则重置无效
- 不要修改 Normalize.css 源码，而是通过后续样式覆盖定制（比如全局改
font-family） - 搭配
@layer base（如果项目支持）可明确层级优先级，防止被组件样式意外覆盖
如何安全地使用 CSS 新特性而不炸掉 IE11
不是“能不能用”，而是“降级是否可控”。比如用 grid 布局时，IE11 支持的是旧版 display: -ms-grid 语法，但它的轨道定义、grid-area 行为和现代规范完全不同——强行兼容只会增加维护成本。
更务实的做法是：用特性检测 + 回退布局。例如：
@supports (display: grid) {<br> .container { display: grid; }<br>}<br>@supports not (display: grid) {<br> .container { display: flex; flex-wrap: wrap; }<br>}
注意：@supports 在 IE11 中不被识别，所以 fallback 规则会生效，这正是我们想要的。
- 避免在
@supports里嵌套复杂逻辑，只用于一级布局切换 - JavaScript 中检测要用
'grid' in document.documentElement.style，而不是检查window.CSS（IE11 有CSS对象但不支持grid） - 像
color-mix()、scrollbar-gutter这类纯装饰性新特性，直接不写 fallback，IE11 用户就少个滚动条内边距，不影响功能
为什么开发者工具里看到的“计算样式”不能信
因为 DevTools 显示的是当前浏览器渲染后的结果，不是代码本意。比如你在 Chrome 里看到 margin-top: 24px 计算正确，但在 IE11 里可能因 margin collapse 规则不同而变成 0；又或者 transform: scale(0.9) 在 Edge Legacy 里触发了子像素渲染 bug，导致文字模糊，但 DevTools 里看不出。
真实兼容性必须靠真机/虚拟机实测，尤其关注三类场景：
- 表单控件：IE11 的
select下拉箭头无法自定义，date输入框无原生日历，必须用 polyfill 或封装组件拦截 - 字体渲染：Windows 上 IE11 默认用 GDI 渲染，Chrome 用 DirectWrite，同一
font-weight看起来粗细不同，别依赖视觉对比 - Flexbox 换行：IE11 的
flex-wrap: wrap对min-width处理异常，有时子项死活不换行，得加flex-basis: 0强制重算
最常被忽略的一点：CSS 自定义属性（--primary-color）在 IE11 完全不支持，且无法被 Autoprefixer 处理——必须用 PostCSS 插件 postcss-custom-properties 编译成静态值，否则整个样式表会静默失效。
