익스플로러에서 height auto가 적용이 안되는데 어떻게 해야할까요?

미해결질문
한연희 프로필

크롬이나 파이어폭스에서는 위 처럼 잘 보이는데

익스에서만

이렇게 보입니다 ㅠㅠ 여기저기 찾아봤지만 해결이 안돼서 질문 드립니다!

그냥 png파일로 넣어야할까요,,,,?ㅜㅜ

1분코딩 프로필
1분코딩 9달 전

혹시 가능하다면 해당 페이지 주소를 알려줘 보시겠어요?

이미지만 봐서는 무엇이 문제인지, 해결은 가능한 것인지 알기가 어려워서요 :)

그리고 익스플로러 버전도 몇인지 알려주세요~

한연희 프로필
한연희 9달 전
  <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입니다. 감사합니다!

1분코딩 프로필
1분코딩 9달 전

아이고, 제가 깜빡하고 답변을 너무 늦게 달았네요;;
익스플로러에서는 viewBox를 처리하는게 좀 다르더라고요~
브라우저 체크를 해서, 익스플로러의 경우는 SVG에 height를 명확히 넣어줘보시면 어떨까 싶습니다.
CSS에서 설정을 어떻게 하느냐, 또 viewBox 설정이 되어있느냐에 따라서도 달라질수 있으니
SVG의 width/height, CSS의 width/height, viewBox 모두 테스트 하시면서 맞춰보시면 될 것 같습니다.

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스