弹窗中 radio 按钮不显示或错位，主因是 display、vertical-align 未对齐及父容器渲染上下文异常；需统一 label/input 的 display、font-family，重置 radio 的 margin/padding/vertical-align，并确保 name 属性一致、DOM 就绪、CSS 类顺序正确。
弹窗里 radio 按钮不显示或错位，大概率是 display 或 vertical-align 没对齐
原生 在弹窗中“消失”或挤成一团，不是它坏了，而是父容器的渲染上下文被破坏了。常见于用 或自定义 div 弹窗时，内部没做行内元素对齐控制。
关键点就两个：label 和 input 必须同级、同 display 类型、同 font-family；否则 Chrome 和 Firefox 会按不同 baseline 渲染，导致视觉上“偏高”或“贴顶”。
- 给所有
label、input[type="radio"]、button加display: inline-block（别依赖默认inline） - 统一设置
font-family: "Segoe UI", "Microsoft YaHei", sans-serif，避免字体度量差异拉偏对齐线 -
input[type="radio"]必须重置margin: 0; padding: 0; vertical-align: middle，否则某些 UA 样式会让它和文字脱节 - 如果用了 flex 布局居中整个表单区，确保只作用在包裹
label的那一层div上，而不是直接套在上
用
showModal() 调用后 radio 仍不可交互，90% 是因为 元素还没挂载到 DOM，或者被 inert 或 aria-hidden="true" 锁死了。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 确认
在 HTML 中静态存在，或 JS 插入后已执行document.body.appendChild(dialogEl) - 不要在
showModal()前手动设dialogEl.hidden = true或删掉open属性——showModal()会自动加open，删了等于废掉模态栈 - 若弹窗由框架（如 React/Vue）动态渲染，确保事件监听绑定在
dialogEl.addEventListener('click', ...)之后，而非组件 mount 前 - 旧版 Safari（≤15.6）或 IE 不支持
，此时需回退方案并手动加tabindex="0"和focus()才能让 radio 可聚焦
radio 组在弹窗里选不了，检查 name 属性是否被重复或隔离
点击一个 radio，其他同组选项不取消，说明它们没被浏览器识别为同一组。这在弹窗场景特别容易出问题——尤其是从主页面复制代码进弹窗，却忘了更新 name 值。
-
name必须完全一致（包括大小写），且不能含空格或特殊字符；推荐用短小英文如name="payment-method" - 如果弹窗内容是异步加载（比如 fetch 后
innerHTML注入），确保插入的是完整 HTML 片段，而不是只插input标签而漏掉label或父容器 - 避免在多个弹窗中复用同一组
name，否则用户在 A 弹窗选了，B 弹窗同名 radio 也会联动——这不是 bug，是浏览器标准行为 - 用
console.log(document.querySelectorAll('input[name="xxx"]'))验证是否真有多个同名 radio 被选中
级联 radio 控制弹窗内子内容，CSS 类顺序比 JS 更关键
一级 radio 选中后，二级选项区域不出现？不是 JS 没触发，很可能是 .shown 类被更早声明的 display: none 覆盖了。
- CSS 中，
.tier2-options { display: none; }必须写在.shown { display: block; }之前，否则后者无效 - 如果子区域用了嵌套 class（如
.tier2-options .subtier），优先用更具体的选择器，或直接加!important（仅限调试阶段） - JS 切换 class 时，别用
el.className = 'shown'这种覆盖写法，改用el.classList.add('shown')和el.classList.remove('tier2-options') - 移动端注意：iOS Safari 对
display: none → block切换有渲染延迟，可加el.offsetHeight强制重排，再设display: block
真实项目里最容易被忽略的，是弹窗内容异步加载后 radio 的 focus 状态和键盘导航支持——即使鼠标能点，Tab 键可能跳不过去，这对可访问性是硬伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
