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 没机会执行。
- 用浏览器开发者工具的 Event Listener 面板检查
.dropdown-toggle上是否被覆盖或屏蔽了click监听器 - 避免在父级写
onclick="return false"或全局拦截mousedown - 改用
data-bs-toggle="dropdown"+data-bs-auto-close="outside"组合，减少对事件流的依赖 - 若必须拦截，确保在自己的 handler 里手动触发
bootstrap.Dropdown.getInstance(...).toggle()
Firefox 中下拉箭头（::after）偏移或消失
Bootstrap 5+ 用伪元素 ::after 渲染小箭头，它依赖 position: absolute 和 top/right 偏移。Firefox 对含 transform 的祖先元素中绝对定位的计算略有差异，尤其当触发按钮本身有 transform: translateZ(0) 或 will-change: transform 时，箭头可能跑偏甚至不可见。
- 检查
.dropdown-toggle或其任意父级是否加了transform或will-change—— 这类声明会创建新的层叠上下文和包含块，改变::after的定位基准 - 临时移除这些样式验证是否恢复；如需保留，可给箭头加
transform: translateZ(0)强制提升图层 - 更稳妥的方式：用 SVG 替代伪元素箭头，在 HTML 里内联
<svg>，完全绕过渲染差异
