Chrome 58以下不支持initial关键字，会导致整条CSS规则被忽略，应改用具体初始值（如background-color: transparent）并配合PostCSS处理兼容性。
Initial关键字在Chrome 58以下失效
initial 是 CSS 自定义属性（CSS 变量）和原生属性都支持的全局关键字，表示该属性的初始值。但它在 Chrome 58 之前、Firefox 26 之前、Safari 6.1 之前均不被支持。如果你在 background-color: initial 这类声明中用了它，旧版浏览器会直接忽略整条规则——不是回退到默认值，而是跳过解析，导致元素呈现 UA 默认样式（比如 body 变成白色而非你期望的透明/继承色）。
常见错误场景包括：
- 用
color: initial试图重置文字颜色，结果 IE11 / Safari 6 完全无反应 - 在媒体查询里写
@media (prefers-reduced-motion) { * { animation: initial; } }，但 Safari 9 下整段媒体查询被静默丢弃 - 搭配 CSS 自定义属性使用时，
--gap: initial在不支持initial的浏览器里不会触发 fallback，而是让变量未定义，后续gap: var(--gap)计算为无效值
改用具体默认值比initial更可靠
绝大多数 CSS 属性的初始值是确定且文档化的，直接写出来反而兼容性更好、语义更明确。例如：
-
margin: initial→ 改成margin: 0（所有方向默认就是 0） -
font-weight: initial→ 改成font-weight: 400（规范明确定义初始值为 normal，即 400） -
display: initial→ 改成display: inline（display初始值对所有元素都是inline，除非是块级替换元素） -
background-color: initial→ 改成background-color: transparent（这是它的真正初始值，不是inherit或unset）
注意：不能一概而论“所有初始值都是 0 或 none”，必须查 MDN 上对应属性的 Initial value 栏。比如 border-style 初始值是 none，但 border-width 是 medium（约 3px），写成 0 就改变了行为。
Reset脚本无法修复initial语法层面的不识别
有些团队会引入 normalize.css 或自研 Reset 脚本，希望“兜底”处理 initial 不兼容问题。但这是无效的——Reset 脚本只是 CSS 文件，它不能改变浏览器对 CSS 语法的解析能力。initial 在不支持的浏览器里属于非法关键字，CSS 解析器遇到就丢弃整条声明，Reset 里的规则根本没机会生效。
真正有效的做法只有两个：
- 用 PostCSS 插件（如
postcss-initial）在构建时把initial替换为对应的具体值，生成双版本 CSS - 在关键路径上彻底避免
initial，改用已知兼容的值 + 注释说明意图，例如：/* reset to spec-defined initial: */ color: #000;
自定义属性中initial的fallback机制有陷阱
当 initial 出现在 var() 的 fallback 位置时，比如 color: var(--text-color, initial)，这个 initial 同样受浏览器支持限制。更隐蔽的是：如果主变量未定义，且 fallback 是 initial，而浏览器不支持它，那整个 var() 表达式会退化为无效值（color: invalid;），最终采用继承值或 UA 默认值，而不是你预期的“初始值”。
安全写法是显式写出 fallback 值：
- ❌
padding: var(--pad, initial); - ✅
padding: var(--pad, 0); - ✅
opacity: var(--fade, 1);
这类细节在组件库或设计系统中尤其容易被忽略，上线后在企业内网老版本 Edge 或政务系统定制浏览器里才会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
