首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么身高在IE11上看起来如此不同?

为什么身高在IE11上看起来如此不同?
EN

Stack Overflow用户
提问于 2019-04-10 03:51:04
回答 2查看 65关注 0票数 0

我有一个带有width: 200pxheight: auto的svg对象。在(几乎)每种浏览器上(edge、火狐、opera -都更新了),高度似乎和预期的一样-- 60.27px,由浏览器计算得出。但是IE11..。让我的生活更加艰难(我不能说这是令人惊讶的)。查看差异:

svg代码:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
._logo svg {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

(._logo包含box-sizing: border-box)

为什么会发生这种情况?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-10 04:04:55

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

票数 0
EN

Stack Overflow用户

发布于 2019-04-10 04:12:03

您必须在svg上显式设置height。现在您正在使用height: auto。svg在IE中失去宽高比的原因是因为浏览器的高度是从根元素计算的,而不是您所期望的包装元素。如果您希望svg的高度为60px,我可以直接设置。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55600325

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档