dialog 元素默认样式跨浏览器严重不一致，必须重置 margin、padding、border、font-size 等基础属性，并确保其为 body 直接子元素，否则在 safari/firefox/chrome 中会出现偏移、透明、撑满、backdrop 失效等问题。
dialog 元素没有跨浏览器一致的默认样式，直接写进去不重置，大概率在 Safari 里偏移、在 Firefox 里透明、在 Chrome 里撑满又带奇怪 margin —— 它不是“能用”，而是“看着像能用，点开就出问题”。
为什么 dialog 的默认样式不能信
浏览器对 dialog 施加的是 UA 样式（User Agent），不是规范定义的统一行为。Chrome 默认加 margin: 16px auto 和圆角阴影；Firefox 渲染为无边框透明块；Safari 17.4+ 才开始居中，旧版甚至完全不渲染 backdrop。更麻烦的是：dialog 的定位逻辑依赖父容器是 直接子级，一旦嵌套在 <div class="app"> 里，<code>margin: auto 失效、position: absolute 偏移、::backdrop 消失。
- 不要指望
margin: auto居中 —— 它只在特定条件下生效，且 Safari 不买账 - 别用
display: flex包裹dialog来居中 —— 这会破坏原生焦点锁定和 backdrop 渲染 -
border默认是unset，想加边框必须显式写border: 1px solid #ccc -
padding和font-size在不同浏览器中差异明显，不设就等于放弃控制
必须重置的基础 CSS 规则
以下是最小可行重置集，覆盖 Chrome/Firefox/Safari 17.4+ 主流行为：
dialog {
margin: 0;
padding: 1.5rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font-family: system-ui, -apple-system, sans-serif;
max-width: 90vw;
width: min(480px, 90vw);
position: relative;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
注意：::backdrop 在 Safari 15.4–16.3 中支持极差，background 可能完全不生效；Firefox 目前仍不渲染该伪元素（仅逻辑阻塞）。如需强兼容，得额外加一层 <div class="backdrop"> 并手动 toggle。
<ul>
<li>
<code>position: relative 是为了防止某些 Safari 版本因父级 transform 导致弹窗错位
max-width + width: min() 是响应式安全写法，避免窄屏溢出或宽屏过空dialog 设 pointer-events: none —— 这会让 showModal() 的焦点管理彻底失效点击 backdrop 关闭时的样式干扰点
监听 click 判断 e.target === dialog 来关闭，看似简单，但 Safari 15.4–17.6 中这个判断基本不可靠：backdrop 不是真实节点，事件目标常落在内部按钮或 上。此时如果 dialog 的 padding 或 border 没重置，getBoundingClientRect() 计算出的边界就会偏差，导致“点空白处没反应”或“点按钮也关了”。
- 确保
padding和border显式设置，否则getBoundingClientRect().left等坐标值在 Safari 下误差可达 20px+ - 别在
dialog上设overflow: hidden—— 它会裁剪 backdrop，尤其在 iOS Safari 中 - 如果用了
transform或will-change的父容器，dialog会脱离正常文档流，坐标判断完全失准
真正容易被忽略的初始化陷阱
很多人以为样式重置完就稳了，但实际运行时最常崩在 DOM 加载时机和插入位置上。比如把 <dialog></dialog> 写在 <main></main> 里，再用 JS 调 showModal() —— Safari 17.6 下 backdrop 不出现、Esc 不响应、click 事件 target 错乱，全是因为它根本没被浏览器识别为合法模态容器。
-
dialog必须是的直接子元素，动态插入请用document.body.appendChild(dialogEl) - 脚本不能放在
里直接调showModal()，否则document.getElementById()返回null - 不要手动操作
dialog.open = false或dialog.removeAttribute('open')—— 这会导致 backdrop 残留、下一次showModal()失败 - 关闭后记得手动
triggerBtn.focus()，否则键盘用户焦点丢失，这是可访问性硬要求，不是“锦上添花”
