익스플로러에서 height auto가 적용이 안되는데 어떻게 해야할까요?
418
작성한 질문수 1
크롬이나 파이어폭스에서는 위 처럼 잘 보이는데
익스에서만
이렇게 보입니다 ㅠㅠ 여기저기 찾아봤지만 해결이 안돼서 질문 드립니다!
그냥 png파일로 넣어야할까요,,,,?ㅜㅜ
답변 3
0
아이고, 제가 깜빡하고 답변을 너무 늦게 달았네요;;
익스플로러에서는 viewBox를 처리하는게 좀 다르더라고요~
브라우저 체크를 해서, 익스플로러의 경우는 SVG에 height를 명확히 넣어줘보시면 어떨까 싶습니다.
CSS에서 설정을 어떻게 하느냐, 또 viewBox 설정이 되어있느냐에 따라서도 달라질수 있으니
SVG의 width/height, CSS의 width/height, viewBox 모두 테스트 하시면서 맞춰보시면 될 것 같습니다.
0
<style>
html,body {margin:0; padding:0;}
#visual {position:relative; width:100%; height:500px; background-color:#000;}
#visual .wave {position:absolute; bottom:0; width:50%; z-index:100;}
#visual .wave.left {left:0;}
#visual .wave.right {right:0;}
#visual .wave path {width:100%; height:auto; fill:red;}
</style>
<div id="visual">
<svg class="wave left" x="0" y="0" viewBox="0 0 2000 206" width="2000" >
<path class="" d="M0,0c0,0,224,198,1000,206H0V0z"/>
</svg>
<svg class="wave right" x="0" y="0" viewBox="0 0 2000 206" width="2000" >
<path class="" d="M2000,0c0,0-224,198-1000,206h1000V0z"/>
</svg>
</div>너무 두서없이 질문드려서 죄송해요 ㅠㅠ
해당 사이트는 일단 png로 작업해놓아서 간략하게 코드 남기겠습니다!
익스플로러 버전은 11입니다. 감사합니다!
0
혹시 가능하다면 해당 페이지 주소를 알려줘 보시겠어요?
이미지만 봐서는 무엇이 문제인지, 해결은 가능한 것인지 알기가 어려워서요 :)
그리고 익스플로러 버전도 몇인지 알려주세요~
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1426
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1565
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
342
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
238
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
281
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
335
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
883
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
235
1