需显式重置 dialog 内 button 样式：设 appearance: none、border、background、padding、font 等；dialog 必须 position: relative 才能精确定位关闭按钮；× 按钮须满足 type="button"、aria-label、可聚焦三条件。
dialog 里 button[type="button"] 的默认样式怎么覆盖
原生 <button></button> 在 <dialog></dialog> 内部不会自动继承 dialog 的字体、颜色或圆角，浏览器会按表单控件默认样式渲染（比如带阴影、固定 padding、灰色边框）。想统一风格，必须显式重置。
常见错误是只写 dialog button { border: none; }，却漏掉 background、padding、font 等关键属性，导致按钮看起来“突兀”或“缩成一团”。
- 务必重置
appearance: none，否则 Safari/Chrome 仍保留系统按钮基底样式 -
border和background都得设，不能只设一个；留空 = 用浏览器默认，不是透明 - 推荐用
padding: 0.25em 0.5em而非固定像素值，适配不同字号缩放 - 加
cursor: pointer，避免在部分 Linux 桌面环境里悬停无反馈
关闭按钮定位到右上角的可靠写法
用 position: absolute 是最直接的方式，但前提是 <dialog></dialog> 必须设 position: relative —— 否则 top/right 会相对于 viewport 或最近的定位祖先，而不是 dialog 本体。
别依赖 float: right，它在 flex/grid 容器里失效，且容易被其他 inline 元素干扰。
-
dialog { position: relative; }是前提，缺了这句，button { position: absolute; top: 0.5em; right: 0.5em; }就会飘走 - 用
em或rem单位，比px更适应用户缩放和 font-size 变化 - 加
z-index: 1，防止被 dialog 内部其他绝对定位元素盖住 - 如果 dialog 内容有
overflow: hidden，按钮可能被裁剪，需确认父容器没设这个
让 × 按钮真正可访问的三个硬性条件
一个视觉上漂亮的 × 按钮，若不满足可访问性基础，对屏幕阅读器用户就是“不存在”的。这不是加分项，是底线。
- 必须设
type="button"，否则在表单上下文中可能意外触发表单提交 - 必须有
aria-label="关闭"（中文）或aria-label="Close"（英文），不能只靠文字 × 或伪元素::before - 必须能键盘聚焦：确保没写
tabindex="-1"，且没被inert或aria-hidden="true"影响
漏掉任意一条，NVDA/JAWS 用户就无法发现或操作这个按钮。
点击 backdrop 关闭时，X 按钮要不要同步响应
不需要额外 JS。只要 X 按钮调用的是同一个 dialog.close()，那么无论用户点 backdrop、按 Esc、还是点 X，都会触发同一个 close 事件，状态清理逻辑只需写一次。
但要注意：如果你在 X 按钮上绑了 click 并执行了异步操作（比如发请求后才 close），而 backdrop/Esc 关闭是立即发生的，行为就不一致了——这种设计本身就有问题。
- 关闭逻辑应保持原子性：先完成业务动作（如清空表单、取消请求），再调用
close() - 不要在 X 按钮里写
dialog.remove()或dialog.hidden = true，它们破坏模态栈，后续showModal()会失败 - 监听
dialog.addEventListener('close', ...)做收尾，比分散写在多个按钮里更可靠
最易被忽略的是：按钮用了 this.closest('dialog').close()，但 dialog 没设 id，也没保证 DOM 结构稳定——一旦嵌套层级变化，closest 就找不到目标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
