Question

在尝试为我的网站添加一些精美的SVG图像作为项目符号时，我遇到了一些真正的奇怪行为，似乎是Firefox中的错误。我已将其调试为以下MWE：

源代码

我有以下HTML文档：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        ul {
            list-style-image: url('listImage.svg');
        }
        </style>
    </head>
    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </body>
</html>

我还有以下名为listImage.svg的SVG文件：

<svg  xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

问题

当我在Firefox中打开HTML文档时，该列表将按应有的方式显示，并且SVG很好地显示为该列表的要点：

但是当我刷新页面或重新加载页面时，它们有时会消失：

刷新页面时，看似随机的图像不断出现并消失。相反，进行硬刷新（使用 Ctrl + F5 ）或删除缓存和离线网站数据不会对此进行更改。

特定的浏览器

此问题仅在Firefox中发生

Firefox Quantum 65.0 (64-bits)
Firefox Developer Edition 66.0b4 (64-bits)

在其他浏览器中我没有任何问题，图像始终显示。

Internet Explorer 11
    Version: 11.523.17134.0
    Updateversions: 11.0.105 (KB4480965)
Edge
    42.17134.1.0
    Microsoft EdgeHTML 17.17134

（（如果有人可以提供有关Google Chrome的信息，请进行编辑并将其添加到问题中。我使用了一些在线工具，结果表明SVG在Google Chrome中看起来不错，但是我认为此测试不可行）是有力的证明）

为什么会这样？

相关问题

我发现this question可能与此有关，但是这个问题有所不同，因为我在Firefox中仅遇到此问题，并且该问题的答案尚未解决我的问题。

Answer 1

我无法回答FF Dev Ed 66.0b2中的行为，但是有一种变通方法可以使假装的结果在FF和Chrome中看起来不错（未经Edge或Safari测试）：

在li标签中使用svg背景图片，而不是ul list-style-image。设置此背景的位置，并在li上添加填充

ul {
  list-style-type: none;
  margin-left: -20px;
}

li {
  background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg');
  background-repeat: no-repeat;
  background-position: 0px 6px;
  padding-left: 20px;
  background-size: 5px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

这是对应的fiddle

编辑：正如我在评论中所写，*。gif文件在FF和Chrome中的行为与预期相同，请选中此fiddle。因此，另一种答案是：

保留您的代码，只需将svg转换为gif

更新：您的svg图像既没有定义宽度也没有定义高度，这样做可以解决问题：

<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

检查：https://jsfiddle.net/zf1hjrav/

随机出现（消失）SVG项目符号

源代码

问题

特定的浏览器

为什么会这样？

1 个答案: