css - IE Edge 显示 IE 9 hack

Question

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

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

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

Answer 1

我遇到了同样的问题，并且发现在 Edge 下，一些 SVG 会正确显示，而另一些会被拉伸(stretch)。

我选择了在 \9 之上的辅助 hack，注意 Browserhacks ，它针对 IE >= 11:

.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。 IE 7 支持此语法(请参阅 http://caniuse.com/#feat=css-sel3 )。

进一步阅读:

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