Firefox가 SVG를 표시하지 않음

Firefox가이 페이지에 SVG 로고를 표시하지 않는다는 것을 알았습니다 - http://silodrome.com - Chrome과 Safari뿐만 아니라 IE10 이상에서도 문제없이 작동합니다. 로고에 사용되는 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{...}에서 #topLinks li{...} 속성을 제거하면 Firefox에서 svg가 제대로 표시되지만 RSS 피드 버튼이 위쪽으로 밀려납니다!

SVG에는 아무런 문제가 없지만 display 속성에 문제가 있습니다!

이 우선 곧 적합한 솔루션 :

출처

2014-02-09 09:01:06

답장을 보내 주셔서 감사합니다. "디스플레이"속성을 연구했지만 RSS 문제를 해결하는 방법을 모르겠습니다. – user3289190

를 게시 할 예정입니다, 당신은 명시 적으로 폭을 설정 한 높이는 SVG 함유 0에 img을의 속성. 올바른 크기로 설정 한 경우에도 속성을 사용하는 것은 좋지 않습니다. 그러나, 나는 파이어 폭스가 이것을 무시한다고 생각한다. 적어도 dev 도구를 사용하여 속성을 변경하여 이미지를 다시 표시 할 수는 없습니다.

당신의 문제는 SVG가 결코 크기를보고하지 않는다고 생각합니다. SVG 파일에는 viewBox을 정의하지만 이미지 크기는 정의하지 않습니다. 따라서 파이어 폭스의 table-cell 크기 조정 알고리즘은 크기가 작을수록 작아집니다 : 0px × 0px.

해결 방법은 CSS에서 HTML 페이지의 크기를 지정하거나 이미지 자체에 width 또는 height을 지정하는 것입니다. (또는 둘 다 수행하십시오.)

출처

2014-02-10 05:08:43 Jeremy

Firefox가 SVG를 표시하지 않음

답변

관련 문제