Question

我注意到Firefox并未在此页面上显示SVG徽标 - http://silodrome.com - 它可以在IE10 +以及Chrome和Safari中使用，没有任何问题。用于徽标的CSS是;

a#logo, a#logo:visited {
            width: 90%;
            max-width: 350px;
            margin: 45px 0 10px 0;
            display: inline-block;
            position: relative;
            z-index: 0;
            }

        a#logo img {
            width: 100%;
            height: auto;
            }

        a#logo:hover {
            opacity: 0.75;
            }

页面上使用的HTML是;

<li><a href="http://silodrome.com" title="Home" id="logo"><img src="http://silodrome.com/wp-content/themes/silodrome/img/logo.svg" width="" height="" alt="Silodrome" /></a></li>

我一直在谷歌上搜索，但我无法找到解决方案，我会非常感谢任何建议，如果需要，我可以提供更多信息。这是一个新的自定义Wordpress主题。

Answer 1

从display:table-cell删除#topLinks li{...}属性似乎在firefox中正确显示了svg，但RSS提要按钮被向上推！

SVG没有任何问题，但问题在于display属性！

很快会发布正确的解决方案：）

Answer 2

首先，您已明确将包含SVG的img的宽度和高度属性设置为0。即使您将这些设置为正确的大小，使用属性也是不好的做法。但是，我认为Firefox无论如何都忽略了这一点;至少我不能通过使用开发工具来重新显示图像。

我认为你的问题是SVG永远不会报告大小。您可以在SVG文件中定义viewBox，但不能定义图像尺寸。所以Firefox的table-cell大小调整算法将它缩小到可以得到的最小值：0px×0px。

解决方案要么在CSS中指定HTML页面的大小，要么为图像本身提供width或height。（或者，当然，两者都做。）

Firefox不显示SVG

2 个答案: