背景大小 100% 自动在 IE 10 中不起作用答案

【问题标题】：Background size 100% auto not working in IE 10背景大小 100% 自动在 IE 10 中不起作用
【发布时间】：2014-12-24 04:58:03
【问题描述】：

我有一些带有 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; 样式。

有什么想法吗？

【问题讨论】：

.clouds 容器和任何父容器是否设置为 100% 宽度？如果您显示更多代码结构可能会更好。
我已经稍微更新了 OP，如果您还需要什么，请告诉我。
stackoverflow.com/questions/21840551/…
嗨，克里斯蒂娜，感谢您的意见 - 链接成功了！

标签： html css internet-explorer svg

【解决方案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>

【讨论】：