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

Question

我有一些svg背景的div层。设置为100％宽度和自动高度：

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

结果是（全宽浏览器屏幕截图）：

然而，我似乎无法让它在IE10上运行。这就是它给我的东西（更别提设计/版面差异，只是未拉伸的云背景）：

尽管IE10显示他们已经应用了样式background-size: 100% auto;，但这仍然存在。

任何想法发生了什么？

Answer 1

在此处找到答案：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>