IE 中的内联 SVG 添加额外高度答案

【问题标题】：Inline SVGs in IE Adding Extra HeightIE 中的内联 SVG 添加额外高度
【发布时间】：2015-10-05 08:14:07
【问题描述】：

我遇到了内联 SVG 在 IE 浏览器中显示不正确的问题。图标显示正确的大小，但在 IE 中，它们似乎在它们周围创建了一个巨大的框，从而搞砸了布局。我使用 img src 标签包含的 SVG 似乎没有做同样的事情并且工作正常。

只有内联 SVG 会产生大量额外的高度空间。我已经尝试了各种高度和宽度的变化，围绕 svg 和其他方法包裹一个跨度，但无法让它在 IE 中正确显示。

<a href="#featured" class="hero-cta-button">
Get Involved<span><svg class="hero-cta-chevron" style="enable-background:new 0 0 40.5 25.5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 40.5 25.5" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="st0" d="m40.5 5.3c0 1.5-0.5 2.7-1.5 3.7l-15 15c-1 1-2.3 1.5-3.7 1.5s-2.6-0.5-3.7-1.5l-15.1-15c-1-1-1.5-2.2-1.5-3.7 0-2.9 2.4-5.3 5.3-5.3 1.5 0 2.7 0.5 3.7 1.5l11.2 11.2 11.3-11.2c1-1 2.3-1.5 3.7-1.5 3 0 5.3 2.4 5.3 5.3z"/></svg></span>
</a>

.hero-cta-button {
    border: 2px solid #fff;
    border-radius: 50px;
    border-radius: 5rem;
    color: #fff;
    display: inline-block;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1;
    padding: 8px 20px 11px;
    padding: .8rem 2rem 1.1rem;
}

.hero-cta-button span {
    display: inline-block;
    height: auto;
    margin-left: 10px;
    margin-left: 1rem;
    width: 15px;
    width: 1.5rem;
}

.hero-cta-chevron {
    fill: #fff;
    width: 100%;
}

【问题讨论】：

标签： css internet-explorer svg

【解决方案1】：

问题在于height: auto; 的.hero-cta-button span 样式。 IE 中的auto 高度是针对文档根而不是包装anchor 元素计算的。

将值 height: auto; 更改为 height: 20px; 解决了该问题。

工作 HTML 示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<style type="text/css">
.hero-cta-button {
    border: 2px solid #fff;
    border-radius: 50px;
    border-radius: 5rem;
    color: #fff;
    display: inline-block;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1;
    padding: 8px 20px 11px;
    padding: .8rem 2rem 1.1rem;
}

.hero-cta-button span {
    display: inline-block;
    height: 20px;
    margin-left: 10px;
    margin-left: 1rem;
    width: 15px;
    width: 1.5rem;
    position:relative;
}

.hero-cta-chevron {
    fill: #fff;
    width: 100%;
}

</style>
</head>
<body style="background-color:black">
<a href="#featured" class="hero-cta-button">
Get Involved<span><svg class="hero-cta-chevron" style="enable-background:new 0 0 40.5 25.5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 40.5 25.5" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="st0" d="m40.5 5.3c0 1.5-0.5 2.7-1.5 3.7l-15 15c-1 1-2.3 1.5-3.7 1.5s-2.6-0.5-3.7-1.5l-15.1-15c-1-1-1.5-2.2-1.5-3.7 0-2.9 2.4-5.3 5.3-5.3 1.5 0 2.7 0.5 3.7 1.5l11.2 11.2 11.3-11.2c1-1 2.3-1.5 3.7-1.5 3 0 5.3 2.4 5.3 5.3z"/></svg></span>
</a>
</body>
</html>

【讨论】：

【解决方案2】：

不幸的是，其他解决方案不起作用。所以我想出了这个解决方案。该脚本查找所有内联 SVG 文件并调整它们的大小。

$(document).ready(function(){
  function svg_resize(){
    $('svg').each(function(){
      var svg_with=$(this).attr('width');
      var svg_height=$(this).attr('height');
      var img_width=$(this).width();
      var img_height=svg_height/svg_with*img_width;
      $(this).height(img_height);
    });
  }
  $(window).on('resize',function(e){
    svg_resize();
  });
  svg_resize();
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：