display: revert 有时变成 inline 是规范行为：当 UA 样式表未显式声明某元素的 display 值（如 div、p、h1），revert 会 fallback 到 CSS initial 值 inline，而非预期的 block。
display: revert 为什么有时变成 inline？
这不是 bug，是规范行为：revert 只回退到浏览器 UA 样式表中「显式声明了 display 值」的元素上才有效。如果 UA 表根本没写这个元素的 display（比如 div、p、h1 在 Chrome/Firefox 中均无显式声明），它就会 fallback 到 CSS 规范定义的 initial 值——也就是 inline。
常见误判场景：
-
div原本设了display: flex，再加display: revert→ 渲染为inline，不是block -
ul设了display: grid，再revert→ 同样变成inline，而非预期的list-item或block - 在 DevTools 的 Computed 面板看到
display: reverted，但实际值是inline→ 说明 UA 表里真没声明
哪些元素上 display: revert 真正可靠？
只在 UA 样式表中**显式写了 display 值**的元素上才按预期工作。你可以直接查 Chrome/Firefox 的 UA stylesheet 源码验证，或用 DevTools 的 Computed 面板观察“source”是否来自 user agent stylesheet。
典型可靠元素：
-
button、input[type="submit"]→ UA 设为inline-block，revert确实还原为inline-block -
table、tr、td、details→ UA 显式声明了display，revert行为可预测 -
li→ UA 设为list-item，所以display: revert能恢复项目符号（避免用block导致符号消失）
all: revert 比单个 display: revert 更激进，但也更危险
all: revert 会把 margin、padding、font、color、box-sizing 等所有属性都退回到 UA 默认值，适合隔离第三方组件库样式冲突。
但要注意副作用：
- 它会重置
box-sizing（UA 通常设为content-box，而现代项目普遍依赖border-box） - 会清除自定义
color和font-family，可能让文字突然变小、变灰、换字体 - 对
progress、input[type="range"]这类原生控件效果好，但对普通容器慎用
别赌 revert，真要“视觉还原”就分情况硬写
想让某个元素看起来像没加任何样式，最稳的方式不是靠 revert 猜测 UA 行为，而是查文档或实测后显式声明：
-
div→ 写display: block -
span→ 写display: inline -
li→ 写display: list-item -
table→ 写display: table
兼容性兜底也别用 revert：Safari 14.1+ 才支持，旧版 iOS Safari / IE 完全不认。需要降级时，display: inherit（前提是父级 display 正确）比 display: initial 更可控。
最容易被忽略的一点：revert 不是“视觉还原开关”，它只按层叠来源做语义回退；你指望它把 div 变回 block，就得先承认——浏览器压根没这么声明过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
