IE Edge显示IE 9 hack

Question

在渲染一些SVG图像时，我使用了带属性的bootstrap .img响应类

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

在IE9中，通过渲染width: 100%属性，它可以像预期的那样工作。然而，IE Edge将其渲染为宽度: 100% \9，并使其不能正确应用。这是IE Edge的已知问题吗？

Answer 1

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

我选择了针对IE >= 11的\9之上的第二次黑客攻击，care of Browserhacks：

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

第二个选择器使用有效的width: 100%覆盖width: 100%\9 (在Edge中被认为是无效值)。

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

进一步阅读：

• https://github.com/4ae9b8/browserhacks/issues/165
• https://github.com/twbs/bootstrap/issues/18082