除非容器具有固定宽度，否则 SVG 图像无法在 IE11/Edge 中正确呈现

Question

Edge 和 Internet Explorer 11 对 SVG 图像的缩放似乎与常规光栅图像不同。

看看下面的例子：

 .container { display: flex; flex-flow: row nowrap; } .box { flex: 0 1 auto; background: red; } .fill { flex: 1 0 auto; background: green; } .box img { display: block; width: auto; height: 150px; background: blue; }

 <div class="container"> <div class="box"> <img src="http://s33.postimg.org/hbl2jy69b/logo_light.png" alt="" /> </div> <div class="fill">fill</div> </div> <div class="container"> <div class="box"> <img src="http://imgh.us/logo-light_1.svg" alt="" /> </div> <div class="fill">fill</div> </div>

两个图像是相同的，第一个是 PNG，另一个是 SVG。 两个图像都位于设置为flex-shrink但不是flex-grow的.box中。 盒子旁边是一个.fill ，它被设置为flex-grow ，但不是flex-shrink 。

所以，这个想法很简单。 我们将每个图像的高度设置为某个固定值，宽度自动计算保持图像的纵横比，分别设置.box容器的宽度。 .fill占用剩余的可用空间。

该示例在 Chrome 和 Firefox 中都可以正常工作，并且显示了两个相同的图像：

然而，在 Edge 中，图像被裁剪：

在 IE 中的哪里更奇怪：

您可以在此处查看 SVG 的来源： http : //imgh.us/logo-light_1.svg

我还为 SVG 的preserveAspectRatio属性尝试了几个不同的值，结果都不同，但仍然不是我真正想要的。

我错过了什么吗？ 这只是一个适当的preserveAspectRatio属性的问题还是一个错误？

Answer 1

正如您所指出的，图像容器上的固定宽度使其在 IE11 上工作。

这对我有用：

.box {
    flex: 0 1 461px;   /* changed flex-basis from auto */
    background: red;
}

如果这不是一个选项，并且您只是希望 PNG 和 SVG 匹配，那么正的z-index值会将蓝色背景移动到表面。

.box {
    flex: 0 1 auto;
    background: red;
    z-index: 1;        /* new */
}

注意， z-index并不需要当施加到柔性物品（被定位参考）。

---

另一种可能的解决方案是将图像放在 flex 容器中，然后定义图像的width （与height相反）：

.box {
  flex: 0 1 auto;
  background: red;
  display: flex;      /* new */
}

.box img {
  /* display: block; */
  /* width: auto; */
  /* height: 150px; */
  background: blue;
  width: 332px;     /* new; value can be anything, PNG and SVG will match */
}