【问题标题】:Firefox doesn't show svg imageFirefox 不显示 svg 图像
【发布时间】:2020-05-11 17:48:00
【问题描述】:

我对 Firefox 中的 SVG 文件有一个非常奇怪的问题。这是关于此页面标题中的徽标:dyncheck.de

它在除 Firefox 之外的所有浏览器中都能正确显示。但仅在页眉中。它在页脚中,即使在 Firefox 中也是如此。它也可以在源代码中正确找到,但检查器告诉我它的大小为零。

有没有人对此有解释或解决方案?

提前致谢

【问题讨论】:

  • 给你的图片一个宽度
  • 并在您的问题中添加minimal reproducible example,因为一旦您有了解决方案,您将修复您的网站,而这个问题对其他人毫无价值。
  • 我之前也尝试过的宽度,但这无济于事。并且在页脚中,图像也以 FF 显示,没有宽度。

标签: firefox svg


【解决方案1】:

正如我所评论的:您需要在 CSS 中为图像指定宽度

会发生什么情况是,标题图像在 flexbox 布局中,而您的 svg 图像折叠为 0 宽度,如下所示:

header,footer{border:1px solid; margin:1em;}
header{display:flex;}
<header>
  <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo"></div>
  <div>header</div>
</header>
<footer>
  <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo" style="width: 200px;"></div>
  <div>footer</div>
</footer>

为图像添加宽度可以解决您的问题:

    header,footer{border:1px solid; margin:1em;}
    header{display:flex;}

    img{width:200px;}
<header>
      <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo"></div>
      <div>header</div>
    </header>
    <footer>
      <div><img src="https://dyncheck.de/images/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo" style="width: 200px;"></div>
      <div>footer</div>
    </footer>

【讨论】:

  • 好吧,我以为你的意思是 html 宽度,因为它已经有 CSS 宽度,但以百分比表示。在原始站点 herpolsheimer.ag 中,该图像是从中获取的,图像没有宽度并且也被显示。非常混乱
猜你喜欢
  • 2013-07-16
  • 1970-01-01
  • 2021-12-24
  • 2014-03-06
  • 2012-10-06
  • 2021-01-11
  • 1970-01-01
  • 2016-10-01
相关资源
最近更新 更多