HTML中details标签在不同浏览器下的默认样式差异-html教程-PHP中文网

ie/edge legacy不支持details标签，需用html5shiv声明标签存在并手动设details,summary{display:block}；旧版safari等需polyfill或降级为div+js模拟。

html中details标签在不同浏览器下的默认样式差异

IE 和旧版 Edge（≤18）压根不识别 details 标签，DOM 中不会创建对应节点，更别说样式了。这不是“样式不一致”，是“直接消失”。

必须引入 html5shiv 让 IE 知道这个标签存在：
html5shiv 只解决“认知”，不解决“显示”——你还得手动补上基础样式：details, summary { display: block; }
如果项目已放弃 IE，但仍有少量用户通过企业内网旧 Edge 访问，建议加一层 UA 检测 + 动态插入 details 的降级 DOM 结构（如用 div + JS 模拟）

那个小三角不是文字，也不是 SVG，而是浏览器私有伪元素渲染的 UI 控件，各内核实现完全不同。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

Chrome 85+ 和 Firefox 79+ 支持标准 ::marker，但只允许改 content 和 color；Safari 18.0 才完整支持，之前只能靠 ::-webkit-details-marker
直接写 color: red 在 summary 上完全无效——它不作用于原生标记
老版本 WebKit 下必须加 all: unset 重置默认内边距和对齐，否则 content 可能不显示或错位
推荐统一写法：details summary::marker { content: "▶"; color: #3b82f6; } + details[open] summary::marker { content: "▼"; }

Safari 对 details:open .content 的 max-height 过渡支持不稳定，尤其内容高度动态时，终值预估不准就直接跳变。

height: auto 无法过渡，必须用 max-height，且终值要设为足够大的固定像素（比如 max-height: 500px），不能写 max-height: 100%
更稳妥的是用 opacity + transform: scaleY() 配合 overflow: hidden，这两者在 Safari 中触发 GPU 加速更可靠
别忘了给目标元素本身加 transition，:open 伪类只是状态开关，不自带动画能力
如果内容高度差异大（比如 FAQ 条目字数悬殊），建议 JS 测量真实高度后动态设置 max-height，避免留白或截断

:open 是 CSS 原生状态选择器，但它依赖浏览器对 details 元素的底层状态管理，某些场景下会被绕过或延迟触发。

确保没在 summary 上误加 pointer-events: none 或 z-index 覆盖导致点击未穿透到原生 toggle 区域
details:open summary > .icon 才有效，summary:open .icon 是无效语法（summary 没有 :open 状态）
若用 Flex 布局，检查 summary 是否被设为 position: relative 后又叠加了遮罩层，可能拦截了原生事件
某些国产双内核浏览器（如旧版 QQ 浏览器）在兼容模式下会禁用 :open，需检测 getComputedStyle(details).display === 'block' 并 fallback 到 class 切换