时间戳

首页 > 解决方案 > IE 11 中的 SVG 高度

html - IE 11 中的 SVG 高度

问题描述

我有一个复杂的 HTML 代码，我在这里简化了：

<label class="FancyInput">
  <input type="text">
    <svg viewBox="0 0 10 18" class="FancyInputBorder">
        <path d="M-1000,12 L223.166144,12 C217.241379,12 217.899687,12 225.141066,12"></path>
    </svg>
    <svg viewBox="0 0 14 12" class="FancyInputCheck">
        <path d="M1 7 5.5 11 L13 1"></path>
    </svg>  
</label>

<style>
.FancyInputBorder {
    width:1200px;
    height:18px;
    display: inline;
}

.FancyInputCheck {
    width:14px;
    height:12px;
}
</style>

基本上 HTML 在 Chrome 和 IE 11 中的呈现方式不同。所以我删除了所有不需要的代码来说明问题。

在 Chrome 中 FancyInputBorder 确实具有正确的高度，即 18px，但在 IE 11 中却没有。

截屏 ：

在此处输入图像描述

任何人都可以帮忙吗？为什么 IE 11 没有按照要求将 SVG 的高度设置为 18 像素。

谢谢干杯

标签： htmlcss

解决方案

可能的答案是使用属性viewboxand preserveAspectRatio。

<svg viewBox="0 0 1200 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice">
    <defs></defs>
    <g>
        <path d="whatever you have here"></path>
    </g>
</svg>

也可以在 svg 标签 => 上设置样式，style="width:1200px;height:18px;"但根据我的经验，在大多数情况下都可以省略。在大多数情况下，删除 svg 标签上的widthandheight属性（如果有的话）。根据您使用 svg 代码内联、在 CSS 中或作为 img src 的代码，情况可能会有所不同。

因此，一旦您展示了一些重要的实际代码，就可以查看一个非常笼统的答案。

推荐阅读