html - 背景图像类在 chrome 和 firefox 中被切碎，而不是 safari

Question

我在 VS 代码中使用实时服务器扩展。我使用 .about 类将图像添加到 CSS 中的背景。我通过实时服务器在 chrome 中进行测试，一切正常。我压缩我的文件并将其上传到我的托管站点。当我访问实时站点时，我看不到背景图像。当我检查时，我发现我的 css 类不存在，如果我通过浏览器中的开发人员工具手动添加它，则会出现背景图像。当我检查我已上传的代码时，果然 .about 类就在那里。这可能是什么原因造成的？它通过实时服务器在所有浏览器中正常工作，然后决定在实时服务器上删除该类。

我已经尝试将类更改为 id。也改变了图像的路径。将代码重新上传到托管站点，尝试隐身模式。

'''

    <div class="col-lg-7 col-md-12 col-12 d-flex align-items-center">
      <div class="about-text">
        <small class="small-text">Welcome to <span class="mobile-block">my website!</span></small>
        <h1 class="animated animated-text">
          <span class="mr-2">Hello, I am a</span>
          <div class="animated-info">
            <span class="animated-item">Guitarist</span>
            <span class="animated-item">Musician</span>
            <span class="animated-item">Legend.</span>
          </div>
        </h1>

        <p>Joe, maybe say a few words about yourself here.</p>

        <div class="custom-btn-group mt-4">
          <a href="#" class="btn mr-lg-2 custom-btn"><i class='fab fa-paypal'></i> Donate</a>
          <a href="#contact" class="btn custom-btn custom-btn-bg custom-btn-link">Contact me</a>
        </div>
      </div>
    </div>

    <div class="col-lg-5 col-md-12 col-12">
      <div class="about-image svg">
        <img src="./img/Old-Fashioned-Guitar-Silhouette-Design-white.png" class="img-fluid" alt="svg image">
      </div>
    </div>

  </div>
</div>

'''

标签： htmlcssbrowser