浏览器内核差异导致CSS解析结果不同：WebKit/Blink、Gecko、Trident对默认值、特性支持、解析时机等处理不一，需按内核精准适配而非盲目加前缀。
浏览器内核差异直接决定CSS解析结果
不同内核对同一段CSS的解析逻辑可能完全不同：WebKit（Safari、旧版Chrome）和Blink（新版Chrome、Edge）虽同源，但版本迭代后行为有偏移；Gecko（Firefox）对flex子项的min-width默认值处理更保守；Trident（IE）甚至把box-sizing默认设为border-box，而其他所有现代浏览器默认是content-box。这不是“谁对谁错”，而是规范落地过程中的历史分歧。
- IE8及更早版本不支持
@media查询、rem单位、calc()，且display: inline-block在IE6/7中需触发hasLayout（如加zoom: 1）才生效 - Safari 13.1之前对
gap在flex容器中完全不支持，即使写了display: flex也忽略gap，必须用margin模拟 - Firefox对
backdrop-filter长期只支持-webkit-前缀写法（直到v110+才支持无前缀），但实际渲染仍受限于系统是否启用透明效果
加载顺序与CSS解析时机影响兼容表现
CSS是渲染阻塞资源，浏览器会暂停HTML解析，直到CSSOM构建完成。但不同内核对“解析完成”的判定标准不一：IE会等所有@import链加载完毕才开始渲染，而Chrome可能对并行加载的@import做优化；Safari对font-display: swap的fallback时机判断更激进，导致文字闪动更明显。
- 避免在
<head>中用@import引入CSS——它会阻塞并行下载，且IE中可能触发同步重排 - 将关键样式内联（
<style>...</style>），非关键CSS用media="print"或onload切换，可绕过部分内核的初始解析缺陷 - 使用
<link rel="preload" as="style" href="main.css">提前拉取，但注意Firefox 90以下不支持as="style"，需回退到as="fetch"
厂商前缀不是万能解药，要按目标内核精准投放
盲目堆砌-webkit-、-moz-、-ms-前缀反而可能引发冲突。例如-ms-flexbox（IE10）和display: flex（IE11+）不能共存于同一选择器，IE10会因识别到标准属性而忽略前缀，导致布局失效。
.grid-container {
display: -ms-grid; /* IE10 only */
display: grid; /* IE11+, Chrome, Firefox, Safari 16.4+ */
/* 不要写成 display: -ms-grid; display: grid; 在IE10中会失效 */
}
<p>.flex-center {
display: -webkit-box; /<em> iOS 6-, Safari 3.1-6 </em>/
display: -ms-flexbox; /<em> IE10 </em>/
display: -webkit-flex; /<em> Safari 6.1-8.0, Android <4.4 </em>/
display: flex; /<em> 标准，IE11+ / Edge 12+ / Chrome 29+ / FF 28+ </em>/
}- 查
caniuse.com确认目标特性在各内核的起始支持版本，而不是凭经验加前缀 - 用
Autoprefixer配置browserslist时，明确排除已淘汰内核（如not ie <= 11），避免生成冗余代码 -
-o-前缀（Opera Presto）在2013年已弃用，当前项目中可安全移除
兼容性问题常藏在“默认行为”里，不是你写的代码错了
最棘手的兼容问题往往不出现在你主动写的样式中，而是浏览器对未声明属性的默认处理差异。比如<button>在Chrome中默认vertical-align: text-bottom，在Firefox中是baseline；input[type="number"]的appearance在Safari中默认显示增减箭头，在Firefox中则隐藏——这些都会导致行高、对齐、点击热区不一致。
立即学习“前端免费学习笔记（深入）”；
- 对表单控件、
details、dialog等语义化元素，务必显式重置appearance、line-height、padding - 用
normalize.css而非reset.css，它保留合理默认值（如h1的字号层级），只修正跨内核偏差 - 调试时打开浏览器开发者工具的“Computed”面板，对比同一元素在Chrome/Firefox/Safari下的
computed style，重点看margin、line-height、box-sizing这些未显式设置的属性
真正卡住项目的，从来不是某个新特性不支持，而是你没意识到某个“理所当然”的默认值，在另一个内核里根本不存在。
