背景大小100％自动不在IE 10中工作

我已经有一些div与svg背景层。设置为100％的宽度和经销商的高度：背景大小100％自动不在IE 10中工作

<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有以下样式：

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)); 
}

结果是这样的（全宽度浏览器截图）： enter image description here

但是，我似乎无法让它在IE10上工作。这是它给我（心中永远的设计/布局的差异，只是未拉伸云背景）：

enter image description here

这就是尽管IE10表明他们有应用该样式background-size: 100% auto;。

任何想法发生了什么？

来源

2014-10-28 styke

.clouds容器和任何父容器设置为100％宽度？如果你展示更多的代码结构可能会更好。 – crazymatt 2014-10-28 17:07:01

我已经更新了一点OP，让我知道如果你需要别的东西。 – styke 2014-10-28 17:11:28

http://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10 – Christina 2014-10-28 17:31:58

答案在这里找到：https://stackoverflow.com/a/22970897/1192861

确保您的SVG具有宽度和高度

我产生我的SVG的由插画家，我不得不再次打开它们，并设置一个宽/每个人的身高。设置它的一个非常快速的方法是注意这部分svg元素：

viewBox="0 0 1428.5 521.8"其中1428.5是宽度，而521.8是高度。所以修复确保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中工作

回答

相关问题