css - 为什么高度在 IE11 上看起来如此不同？

Question

我有一个带有width: 200pxand的 svg 对象height: auto。在（几乎）每个浏览器（edge、firefox、opera - 全部更新）上，高度似乎与预期的一样 -60.27px由浏览器计算。但是 IE11... 让我的生活变得更加艰难（我不能说这很令人惊讶）。查看差异：

svg代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 162.229 48.884" enable-background="new 0 0 162.229 48.884" xml:space="preserve">
        <rect fill="#111111" width="162.229" height="48.884"/>
    </svg>

CSS：

._logo svg {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

（._logo包含box-sizing: border-box）

为什么会这样？

标签： css

Answer 1

IE 中存在一个错误，如果您不提供宽度和高度，它无法正确缩放 SVG。如果可以的话，您可能想尝试设置高度。或者你可以试试 Canvas 的方式。http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/