为什么Bootstrap的下拉菜单在Firefox下显示异常

Firefox下dropdown-menu被截断或错位的根本原因是其对position: absolute元素的容器溢出处理更严格，当父级设置overflow: hidden或auto且下拉菜单未脱离剪裁边界时即被裁剪。Firefox 下 dropdown-menu 被截断或错位根本原因是 Firefox 对 position: absolute 元素的容器溢出处理更严格，当父级（比如 .dropdown）设置了 overflow: hidden 或 overflow: auto，而下拉菜单又没脱离该容器的剪裁边界时，就会被砍掉。常见于把下拉菜单放在卡片（.card）、模态框（.modal-body）或带滚动的侧边栏里。Chrome 有时“宽容”地显示出来，Firefox 则按规范裁剪。检查父容器是否意外加了 overflow: hidden —— 特别是自定义 CSS 或某些组件库封装后留下的副作用给触发元素（.dropdown-toggle）加 data-bs-popper="none" 并手动指定 boundary，但更推荐用 Bootstrap 自带的 popperConfig在初始化时显式设置 boundary: 'viewport'，强制弹出层相对于视口定位：const dropdown = new bootstrap.Dropdown(element, { popperConfig: { strategy: 'fixed', modifiers: [{ name: 'preventOverflow', options: { boundary: 'viewport' } }] }});data-bs-toggle="dropdown" 在 Firefox 中不响应点击不是 Bug，是事件冒泡被意外阻止了。Firefox 对 click 和 pointerdown 的触发时机更敏感，如果父级监听了 mousedown 并调用了 e.preventDefault() 或 e.stopPropagation()（比如某些自定义下拉封装、拖拽库、或富文本编辑器），就会导致 Bootstrap 的 click handler 没机会执行。 MacsMind 电商AI超级智能客服