Question

我正在参加一个响应式Web设计课程，并且遇到了一个非常奇怪的问题。我为假冒的电子商务网站制作的徽标不会在Firefox中加载，但会在Chrome中加载。我的教授在使用HTML / CSS / JS方面拥有数十年的经验，甚至他还无法弄清楚为什么会发生此问题。我发现如果我将图像的宽度更改为特定的值，而不是在CSS中将其更改为100％，则可以正常工作。但是为什么在Firefox中将其设置为100％时却无法在Firefox中运行呢？

这是我的HTML（最重要的部分，在您问之前，是的，我已经关闭了所有重要标签，例如body，main，html等）

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Testing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Orbitron:500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cinzel:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="display.css" type="text/css">
</head>


<body>
    <div id="particles-js"></div>
    <script src="javascript/particles.js"></script>
    <script src="javascript/app.js"></script>


  <header>
        <div class="logostuff">
            <a id="logoanchor" href="index.html"><img id="logo" src="images/LogoMeta.svg" alt="META website logo"></a>
            <a id="cartanchor" href="cart.html"><img id="cartimg" src="images/cart.svg" alt="Cart image"></a>
        </div>
        <h4 id="tagline">Let the professionals build it for you!</h4>
    <nav>
    <ul>
      <li><a href="about.html">About Us</a></li>
      <li style="margin-bottom: 0.3rem;"><a href="merch.html"> </a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    </nav>
  </header>

这是相关的CSS位

.logostuff {
  justify-content: space-between;
  display: flex;
}

.logoanchor {
  width: 100%
}

#cartimg {
  width: 100%;
  max-width: 60px;
}

#cartanchor {
  margin-top: 0.9rem;
  width: 20%;
  max-width: 320px;
}

#logo {
  width: 100%;
}

此外，JavaScript与该问题无关，因为没有它，问题仍然存在。当我将目标对准Firefox开发工具中的图像时，它表示它应占用的空间应为0x0，同时仍允许其旁边的购物车SVG存在。

https://imgur.com/a/yBHtdzs这是一张在两种浏览器上的外观的imgur相册。

编辑1：这是徽标https://svgur.com/s/FxL的SVG

Answer 1

我用您提供的svg在chrome和firefox中尝试了带Codepen的代码。这里的问题是徽标anchor具有一个类选择器而不是一个id选择器。将css文件中的.logoanchor更改为#logoanchor。

图片在Chrome中加载，但在Firefox中不加载

1 个答案: