Bootstrap进度条在Firefox中不显示，Chrome/Edge正常的问题

可能的原因及对应解决方案 #

1. 初始宽度0%导致Firefox无法渲染元素 #

Firefox对宽度为0%的块级元素渲染逻辑与Chrome不同，即使带有progress-bar类，0%宽度也可能让元素完全消失。可以给进度条添加最小宽度样式，确保初始状态也能被渲染：

修改HTML进度条元素：

<div id="progress-bar" class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2%;"></div>

或者通过全局CSS设置：

.progress-bar {
  min-width: 2%;
}

2. 后端未返回Content-Length导致进度计算失效 #

Firefox在XHR上传时，如果后端未正确返回Content-Length响应头，event.lengthComputable会返回false，导致进度条宽度一直停留在0%。可以添加 fallback 逻辑，避免进度条完全无反应：

xhr.upload.addEventListener('progress', function(event) {
    var percent = 0;
    if (event.lengthComputable) {
        percent = (event.loaded / event.total) * 100;
    } else {
        // 无法计算总长度时，用模拟进度避免停滞
        percent = Math.min(95, parseFloat(progressBar.style.width) + 1);
    }
    progressBar.style.width = percent + '%';
});

3. Bootstrap版本兼容性或样式覆盖问题 #

• 确保使用的是Bootstrap稳定版本，旧版本部分样式在Firefox中存在渲染差异；
• 检查自定义CSS是否覆盖了progress-bar的核心样式，比如display: none、opacity: 0或overflow: hidden，这些都会导致元素隐藏。

4. 补充上传完成后的状态处理 #

可以在XHR的load事件中强制将进度条设为100%，避免因后端响应问题导致进度停滞：

xhr.addEventListener('load', function() {
    progressBar.style.width = '100%';
});

修改后的完整代码示例 #

HTML部分：

<div class="progress">
  <div id="progress-bar" class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2%;"></div>
</div>

JavaScript部分：

function startUpload() {
    var progressBar = document.getElementById('progress-bar');
    progressBar.style.width = '0%';

    var form = document.getElementById('upload-form');
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', "{{ url_for('daten') }}");
    xhr.upload.addEventListener('progress', function(event) {
        var percent = 0;
        if (event.lengthComputable) {
            percent = (event.loaded / event.total) * 100;
        } else {
            percent = Math.min(95, parseFloat(progressBar.style.width) + 1);
        }
        progressBar.style.width = percent + '%';
    });

    xhr.addEventListener('load', function() {
        progressBar.style.width = '100%';
    });

    xhr.send(formData);
}

内容的提问来源于stack exchange，提问作者Drip Narix