需重置dialog默认样式：margin:0;padding:1em;border:none；统一border-radius:8px；box-shadow设为0 4px 12px rgba(0,0,0,0.15)；dialog::backdrop设背景色；内容区加max-height:90vh和overflow-y:auto；兼容性检测用'showmodal' in htmldialogelement.prototype。
dialog 默认边框和阴影在各浏览器中不一致
Chrome 给 dialog 加了 16px 外边距和浅灰阴影，Firefox 默认无边框无阴影，Safari 甚至可能不渲染圆角或偏移位置。直接写 dialog { box-shadow: ...; border: ... } 很容易被浏览器 UA 样式覆盖，或因 margin/padding 差异导致布局错位。
必须先重置基础盒模型：
-
dialog { margin: 0; padding: 1em; border: none; }—— 清掉默认 margin 和 border，否则 shadow 会套在不可控的空白区域外 - 圆角建议统一设为
border-radius: 8px，太小（如 2px）在 Safari 下易失效，太大（如 24px）在 Chrome 中可能被裁切 - 阴影用
box-shadow: 0 4px 12px rgba(0,0,0,0.15)比默认值更可控；避免用inset或多层 shadow，部分旧版 Safari 不支持
给 dialog::backdrop 设置遮罩层背景色
dialog::backdrop 是模态弹窗自动生成的半透明层，但它不是独立 DOM 节点，不能用 JS 查询或绑定事件，只能靠 CSS 控制外观。
常见错误是漏写 ::backdrop 伪元素，或写成 dialog:backdrop（少一个冒号）导致样式不生效：
- 正确写法：
dialog::backdrop { background-color: rgba(0,0,0,0.6); } - 不要加
!important—— 它本就具有高优先级，加了反而干扰调试 - 若 backdrop 不显示，请确认调用的是
showModal()而非show()；show()不触发 backdrop
dialog 内容区滚动与阴影裁切问题
当 dialog 内容高度超出视口，又没设 max-height 和 overflow-y: auto，内容会溢出、阴影被截断，尤其在移动端。
解决要点：
- 给
dialog设max-height: 90vh，再配合overflow-y: auto，避免撑爆屏幕 - 阴影要加在
dialog自身，不是它的子容器 —— 否则滚动时阴影固定不动，视觉脱节 - 如果用了
transform: translate(-50%, -50%)居中，注意它可能触发硬件加速，导致某些 Android WebView 下阴影模糊或消失；可改用top: 50%; left: 50%; position: absolute;配合transform，但需确保父容器有position: relative
兼容性兜底：dialog 不可用时的 fallback 样式
截至 2026 年 9 月，dialog 在 Chrome/Firefox/Safari 最新版均支持，但 IE 全系、旧版 Edge（≤18）、部分国产双核浏览器仍不识别该标签 —— 此时它会被当成普通 div 渲染，showModal() 报错，close() 无效。
简单检测并降级：
if (!('showModal' in HTMLDialogElement.prototype)) {
document.body.classList.add('no-dialog');
}
然后用 CSS 隐藏原生 dialog，同时启用备用弹窗：
.no-dialog dialog { display: none; }- 用 class 控制备用弹窗显隐，比如
.fallback-dialog.is-open { display: block; } - 别依赖
dialog.open属性做判断 —— 它只在 HTML 中带open属性时存在，JS 调用showModal()不会添加该属性
真正容易被忽略的是焦点管理：原生 dialog 打开后自动聚焦第一个可交互元素，关闭后焦点回退到触发按钮；手动实现时，这个细节几乎没人补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
