배경 크기 100 % 자동 IE 10에서 작동하지 않습니다.

나는 svg 배경 가진 divs 일부 레이어가있어. 100 % 너비와 자동 높이 설정 :배경 크기 100 % 자동 IE 10에서 작동하지 않습니다.

이

height: 65%; 
z-index: 8; 
text-align: center;

구름의 모든 형식에 따라 :

.clouds { 
    z-index: 6; 
    background: url(../images/hot_bonus_clouds.svg) center bottom no-repeat; 
    background-size: 100% auto; 
    @include transform(scale(1.1)); 
}

결과는이입니다 (전체

<div class="group section hot-bonus"> 
    <div class="layer layer-base clouds"></div> 
    <div class="layer layer-back1 clouds-1"></div> 
    <div class="layer layer-back2 clouds-2"></div> 
    <div class="layer layer-back3 clouds-3"></div> 
    <div class="layer layer-back5 bg"></div> 
    </div>

.group 이러한 스타일이있다 너비 브라우저 스크린 샷) : enter image description here

IE10에서 작동하도록하십시오. 이것은 나 (디자인/레이아웃 차이, 단지 무연 신 구름 배경을 신경 쓰지)주고 무엇 :

enter image description here

그리고 이것은 그들이 적용된 스타일 background-size: 100% auto;을 보여주는 IE10에도 불구하고있다.

아이디어가 있습니까?

출처

2014-10-28 styke

.clouds 컨테이너와 모든 상위 컨테이너가 100 % 너비로 설정되어 있습니까? 더 많은 코드 구조를 보여 주면 더 좋을 것입니다. – crazymatt

OP를 약간 업데이트했습니다. 다른 것이 필요한지 알려주세요. – styke

http://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10 – Christina

대답은 여기에서 찾을 : https://stackoverflow.com/a/22970897/1192861

은 SVG는 폭과 내가 일러스트 레이터에서 내 SVG 년대를 생성

높이가 있는지 확인하십시오, 나는 폭을 다시 열고 설정했다/각 높이.

1428.5는 폭 viewBox="0 0 1428.5 521.8" 및 521.8가 높이 : 그것을 설정하는 정말 빠른 방법은 SVG 요소의이 부분에 주목했다. 따라서 SVG 요소가 다음과 같이 표시됩니다.

<svg viewBox="0 0 1428.5 521.8" width="1428.5" height="521.8"....>/***/</svg>

출처

2014-10-28 17:49:03 styke

배경 크기 100 % 자동 IE 10에서 작동하지 않습니다.

답변

관련 문제