默认 display: none 且未激活时不渲染，必须调用 showmodal() 或设 open 属性并手动重置样式；跨浏览器居中需 fixed + transform；::backdrop safari 不支持，须 js fallback；表单提交用 method="dialog" 自动关闭。
dialog 元素默认 display: none，样式重置必须从 visibility 和定位开始
写了 <dialog></dialog> 却看不到？不是 CSS 写错了，是它根本没被渲染——display: none 是硬编码在规范里的初始状态，连 getBoundingClientRect() 都返回空。光加 open 属性只让内容可见，但不触发模态行为，也不自动居中。
必须先确保调用 showModal() 或显式设 open，再动手改样式。否则所有 CSS 都不会生效（因为元素处于“未激活”状态）。
-
dialog不继承父容器的字体、颜色或 margin，所有基础样式都得重写 - Chrome 默认有
margin: 16px，Safari 可能无圆角、无阴影、甚至不居中 - 别依赖浏览器默认的
position，它在不同 UA 下可能是absolute、fixed或未定义
强制居中必须用 position: fixed + transform，不能只靠 margin: auto
<dialog open></dialog> 在多数浏览器里会“看起来居中”，但这只是 Chrome 的 UA 样式巧合，Safari 和 Firefox 完全不保证。真正跨浏览器可靠的居中方案只有：
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
注意：如果父元素有 transform、perspective 或 will-change，position: fixed 会失效（尤其 Safari），此时要确保 <dialog></dialog> 直接挂载在 下，不要嵌套在带变换的容器里。
- 移动端需额外加
max-width: 90vw; max-height: 90vh;防止溢出 - 避免用
width: 100%，它会撑满视口，失去弹窗感；推荐min-width: 300px; width: min(90vw, 480px); -
z-index必须显式设置（如z-index: 1000），否则可能被其他fixed元素遮盖
::backdrop 伪元素样式受限，Safari 不支持且无法监听点击
dialog::backdrop 是唯一能控制遮罩层样式的途径，但它在 Safari 中完全不生效（截至 2026 年 6 月仍无支持），且事件无法直接绑定到 backdrop 上——它没有独立 DOM 节点。
所以不要写：
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
而应这样保底：
- 对 Chrome/Edge 有效：
dialog::backdrop { background: rgba(0, 0, 0, 0.5); } - 对 Safari/Firefox，只能靠 JS 检测并 fallback 插入一个临时
<div class="backdrop"> 覆盖 <li>点击遮罩关闭逻辑必须监听 <code>dialog自身的click，并判断e.target === dialog，不能监听dialog::backdrop
表单提交后 dialog 不关闭？method="dialog" 是最简解
在 <dialog></dialog> 里放 <form></form>，默认提交会整页刷新，看起来像弹窗“闪退”。这不是样式问题，是表单行为未接管。
最简修复方式是给 <form></form> 加属性：
这样提交后会自动触发 dialog.close()，并把按钮的 value 赋给 dialog.returnValue。不需要 JS 监听 submit 或 preventDefault。
- 仅适用于同步提交；异步场景（如 fetch）必须手动
e.preventDefault()+dialog.close() -
method="dialog"在 Safari 15.4+ 支持，旧版需降级为 JS 控制 - 别在按钮上写
onclick="dialog.close()"，用户按回车提交时会漏掉关闭逻辑
dialog 的“默认”理解都不一样——有的当浮层，有的当模态框，有的连 ::backdrop 都不认。你得先接受它不是一个“开箱即用”的组件，而是一个需要逐层兜底的原生基元。
