Bootstrap 5 nav tabs在Firefox和IE浏览器中无法正常切换问题

问题修复方案 #

1. 修复Firefox下切换失效问题 #

你提供的HTML代码中存在属性语法错误：tab-pane 节点的 aria- labelledby 属性中间多了多余空格，正确属性名为 aria-labelledby。Firefox对ARIA属性格式校验更严格，错误的属性名会导致Bootstrap标签页组件无法匹配触发按钮和对应内容面板，出现无报错但无法切换的问题。

修正后的完整代码如下：

<nav>
    <div class="nav nav-tabs" id="dvtabs" role="tablist">
        <button class="nav-link active" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="true">C</button>
        <button class="nav-link" id="nav-associate-tab" data-bs-toggle="tab" data-bs-target="#nav-associate" type="button" role="tab" aria-controls="nav-associate" aria-selected="false">A</button>
    </div>
</nav>

<div class="tab-content" id="dvtabcontent">
    <div class="tab-pane fade show active" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"></div>
    <div class="tab-pane fade" id="nav-associate" role="tabpanel" aria-labelledby="nav-associate-tab"></div>
</div>

修正属性后即可在Firefox 89+版本正常使用标签页切换功能。

2. IE11兼容处理 #

Bootstrap 5官方明确不支持IE11，组件依赖的ES6+语法、CSS自定义属性、现代DOM API在IE11环境下无法正常运行，所以会出现无报错但组件完全不工作的情况。如果必须兼容IE11，可选择以下方案：

• 降级使用Bootstrap 4.x版本，该版本官方支持IE10及以上版本，标签页组件可直接在IE11正常运行
• 若必须使用Bootstrap 5，需额外引入ES6 polyfill、CSS变量兼容垫片等，同时重写部分组件逻辑，该方案适配成本较高。

内容的提问来源于stack exchange，提问作者A.Mac