2017-05-19 1 views
-1

중복 된 질문이라고 생각하기 전에 나와 함께하십시오. 나는 이것이 "SVG 외부 참조가 IE에서로드되지 않음"문제라는 것을 확신하지 못합니다. 그 이유는 다른 SVG 이미지가 올바르게로드되기 때문입니다.IE의 어떤 버전에서도 SVG 이미지가 표시되지 않습니다

문제를 보려면이 사이트를 IE (http://votensw.info/)에서 화면 너비가 900px 미만으로 미리보기하십시오. 오른쪽 상단의 검색 버튼을 클릭하십시오.

다른 브라우저에서는 버튼이 회색 배경 위에 'X'로 바뀝니다. [닫기 버튼의 스크린 샷] [2].

IE에서는 svg "X"이미지도 회색 배경도 올바르게 표시되지 않습니다.

IE에는 svg 문제가있을 수 있지만 CSS에도 문제가 있다고 생각되지만 문제는 무엇인지 알 수 없습니다.

나는 CSS를 검사하고 나를위한 해결책을 찾을 수있는 누구에게나 매우 감사 할 것입니다.

감사

답변

0

아이콘은 외부 자원에서 뭔가를로드 할 경우 IE에서 작동하지 않습니다 SVG 사용을

SVG 사용을 사용합니다.

언급 한 사이트에서 URL을

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use 

에서 브라우저 호환성을 확인하십시오 :

<svg class="icon icon-blue search__icon-close" aria-hidden="true"> 
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.votensw.info/_designs/css/alternative_2017/main_alternative.css/sprite.svg#close"></use> 
</svg> 
+0

"검색"아이콘도이 방법을 사용하고 IE에서 잘 표시된다는 것을 제외하고는이 대답을 수락합니다.

+0

@MichaelAhearn 검색에 사용되는 기호 아이콘은 간단한 경로입니다 . 그러나 닫기 아이콘은 마스크를 만들기 위해 '사용'을 사용합니다. 나는 그런 기능이 지원되지 않는다고 생각한다. – karthick

+0

하지만 검색에 '사용'도 사용됩니다. 그 이유는 내가 왜 표시하고 있는지 혼란 스럽기 때문입니다.하지만 가까운 것은 아닙니다. 실제로 스프라이트 내부의 코드로 놀아서 닫힌 'X'가 IE에 표시되도록했지만 - 항상 그런 것은 아니지만 - 이상하게 들리지만 때로는 새로 고침 후에 나타납니다! –

0

또한 폭 및 svgs가 IE에서 작동 할 높이를 설정해야합니다.

관련 문제