除非容器具有固定寬度，否則 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 */
}