IE 完全不支持 all 属性及 unset 关键字,整条规则被静默丢弃;需手动重置 margin、padding、border 等关键属性;all: revert 比 unset 更安全但兼容性有限,且必须显式设置 display 防止布局崩坏。

all: unset 在 IE 中根本不会解析
IE(包括 IE11)的 CSS 引擎完全不识别 all 属性名,也不认识 unset 关键字。遇到 all: unset 这样的声明,整条规则被静默丢弃——既不报错,也不 fallback,更不会尝试部分生效。这不是兼容性“差”,是语法层面零支持。
连 @supports (all: unset) 都无效,因为 IE 本身不支持 @supports 语法,检测逻辑压根不执行。试图用 all: initial 或 all: inherit 降级?同样失败,all 这个属性名就不在它的白名单里。
哪些属性必须手动重置才能接近 all: unset 效果
想在 IE 中获得一个干净起点,只能显式列出关键非继承属性,并设为 IE 安全值。以下是最常被 UA 样式干扰、且所有 IE 版本(IE8+)都稳定支持的组合:
-
margin: 0和padding: 0:清除h1、p、ul等默认间距 -
border: none:不是border: initial(IE 不认),none是唯一可靠值 -
font-size: 100%:避免 UA 默认字号漂移,比initial更稳 -
line-height: normal:IE 支持normal,数值如1.2也可,但需注意继承链 -
color: #000或color: black:不用initial(IE 不认),写死最保险;若需继承,改用color: inherit -
text-decoration: none:针对a、ins、del等 -
list-style: none:清除项目符号,不碰display -
vertical-align: baseline:防止 inline 元素对齐错位
为什么 all: unset 对 button/input 边框和焦点轮廓无效
这不是兼容性问题,而是语义误解:all: unset 只把非继承属性设为 initial(比如 border: initial → none),但它无法覆盖浏览器 UA 样式表中定义的高优先级规则(如 button { border: 2px outset buttonface; })。UA 规则权重更高,层叠后仍生效。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit,触发小红书发布。
立即学习“前端免费学习笔记(深入)”;
真正能恢复原生可用状态的是 all: revert——它会主动查找并应用 UA 样式表中对该元素定义的值,比如让 <button></button> 恢复默认边框、手型光标和焦点 outline。但注意:all: revert 在 Android 10 及更早 WebView 中仍不支持。
现代项目中该选 unset 还是 revert
all: revert 是多数场景下更安全的选择,尤其涉及表单控件时。它保留了可访问性基础(如键盘聚焦轮廓、鼠标光标样式),而 all: unset 会把这些全设为 initial,导致 outline: 0、cursor: auto、border: none,功能性直接退化。
但 revert 的兼容范围仍有限(Safari 14.1+、Chrome 93+、Firefox 95+),如果项目需支持旧安卓 WebView 或部分企业内网环境,就得放弃 all 系列,回归显式重置清单。最容易被忽略的是:无论用哪个,都必须补上 display 值——all: unset 会让 div 回到 initial(即 inline),页面布局瞬间崩坏。

















