Firefox沒有顯示SVG

我注意到Firefox在這個頁面上沒有顯示SVG標誌 - http://silodrome.com - 它可以在IE10 +以及Chrome和Safari中運行，沒有任何問題。用於標識的CSS是;Firefox沒有顯示SVG

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主題。

來源

2014-02-09 user3289190

從#topLinks li{...}中刪除display:table-cell屬性好像在Firefox中正確顯示svg，但RSS提要按鈕被向上推！

SVG沒有問題，但問題在於display屬性！

將很快發佈一個合適的解決方案:)

來源

2014-02-09 09:01:06

感謝您的回覆Magesh，我一直在研究「顯示」屬性，但不知道如何解決RSS問題。 – user3289190

一兩件事，您明確設置寬度和img到0含有SVG-的高度屬性。即使您將這些設置爲正確的大小，使用屬性也是不好的做法。不過，我認爲Firefox無視這一點;至少我不能通過使用開發工具改變屬性來使圖像重新出現。

我認爲你的問題是，SVG從不報告是大小。您可以在SVG文件中定義viewBox，但不是圖像尺寸。因此，Firefox的table-cell尺寸算法將其縮小爲儘可能小：0px×0px。

解決方案要麼是在CSS中指定HTML頁面的大小，要麼是爲圖像本身指定一個width或height。（或者，當然，都這樣做。）

來源

2014-02-10 05:08:43 Jeremy

Firefox沒有顯示SVG

回答

相關問題