logo标签列表

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

cssinternet-explorersvg
3
我在IE浏览器中使用内联SVG时遇到了问题。图标显示的大小是正确的，但在IE中，它们似乎创建了一个巨大的框，这会破坏布局。使用img src标签包含的SVG似乎没有出现同样的问题，并且正常工作。只有内联SVG才会创建大量额外的高度空间。我尝试过各种高度和宽度变化，围绕SVG包装span等方法，但无法在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%;
}
2个回答
3
问题在于 .hero-cta-button span 样式中的 height: auto;。在 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>
0

其他的解决方案不幸地没有起作用。所以我想出了这个解决方案。该脚本可以找到所有内联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();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接