Question

在渲染一些SVG图像时，我正在使用带有属性的引导程序.img-responsive类

display: block;
width: 100% \9;
max-width: 100%;
height: auto;

在IE 9中，它通过渲染宽度：100％属性按预期工作。但是，IE Edge将其呈现为宽度：100％\ 9并使其无法正确应用。这是IE Edge的已知问题吗？

Answer 1

我看到同样的问题，看到在Edge下，一些SVG会正确显示而其他SVG会被拉伸。

我选择\9之上的次要黑客，照顾Browserhacks，其目标是IE＆gt; = 11：

.img-responsive[src$=".svg"] {
  width: 100%\9; /* IE 6-10 */
}
_:-ms-fullscreen, :root .img-responsive[src$=".svg"] {
  width: 100%; /* IE 11+ */
}

第二个选择器会使用有效width: 100%\9覆盖width: 100%（在Edge中被视为无效值）。

我使用CSS3属性选择器使这些规则仅适用于SVG。 IE 7支持此语法（请参阅http://caniuse.com/#feat=css-sel3）。

进一步阅读：