dialog标签不支持内联width/height，因其为替换型元素且默认display:none，需通过css选择器设置width/max-width、height/max-height、box-sizing:border-box及overflow-y:auto等样式才能生效。
dialog 标签本身不支持 width 或 height 属性，所有尺寸控制必须通过 CSS 实现；直接写 style="width: 500px" 在标签上是无效的（浏览器会忽略），必须用 CSS 选择器明确作用于 dialog 元素。
为什么直接写 width/height 不生效
dialog 是一个替换型元素（replaced element-like），其渲染行为由浏览器内部机制控制，不响应内联 width/height。它默认为 display: none，只有调用 showModal() 或 show() 后才变为 display: block，此时才真正应用 CSS 尺寸规则。若未显式设置 display 或使用了不兼容的 display 值（如 inline），尺寸样式也会失效。
正确设置宽高的 CSS 写法
推荐组合使用 width/max-width 和 height/max-height，避免在小屏设备上溢出或撑满全屏：
-
width控制基准宽度，max-width: 90%防止超宽（尤其移动端） -
height可设固定值（如400px），但更推荐max-height: 80vh+overflow-y: auto应对内容动态变化 - 务必加
box-sizing: border-box，否则 padding/border 会额外增加实际尺寸 - 若需居中，用
margin: auto配合position: absolute或 flex 布局（dialog默认不支持 margin auto 居中，需父容器配合）
dialog {
width: 600px;
max-width: 90%;
height: 400px;
max-height: 80vh;
box-sizing: border-box;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
滚动条和内容溢出处理
当弹窗内容超出高度时，仅设 height 不会自动出现滚动条——必须显式声明 overflow-y: auto 或 scroll。注意：overflow: hidden 会截断内容，overflow: visible 会导致内容溢出遮罩层，破坏模态体验。
- 标题区域固定高度？用
flex布局分离 header/content，让 content 区域自适应并可滚动 - 避免在
dialog上直接设overflow，而应作用于内部内容容器（如.dialog__body） - 移动端慎用固定
px高度，优先用vh或clamp()（如height: clamp(300px, 60vh, 500px)）
兼容性和容易忽略的细节
dialog 在 Safari 15.4+、Chrome 37+、Firefox 98+ 支持良好，但旧版 Firefox 需要 dialog::backdrop 手动补全背景色（否则遮罩透明）。另外几个高频遗漏点：
- 没重置
margin和padding：不同浏览器默认值不同，导致尺寸偏差 - 忘了给
::backdrop设background，遮罩“看不见”误以为没生效 - 在
showModal()调用前就尝试读取offsetHeight，此时仍为 0（DOM 尚未渲染） - 用
transform: scale()模拟缩放？会破坏焦点管理与可访问性，不推荐
最稳妥的做法是：CSS 定义好尺寸 + box-sizing + overflow，JS 仅负责 showModal() 和 close()，其余交给浏览器原生逻辑。复杂交互（如拖拽调整大小）建议放弃原生 dialog，改用成熟库或自定义实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
