CODEWITHSUNDEEP
cssinternet-explorersvg
Cole
Cole

Reputation: 317

Inline SVGs in IE Adding Extra Height

I am having an issue with inline SVGs displaying incorrectly in the IE browser. The icons are displaying the correct size but in IE they appear to be creating a huge box around them that is screwing up the layout. The SVGs that i've included using the img src tag appear to be not doing the same thing and working correctly.

It's only with the inline SVGs creating a ton of extra height space. I've tried all sorts of height and width variations, wrapping a span around the svg, and others and can't get it to display correctly in 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%;
}

Upvotes: 3

Views: 1137

Answers (2)

B. Martin
B. Martin

Reputation: 1163

The other solutions did unfortunately not work. So I came up with this solution. The script finds all inline SVG files and resizes them.

$(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>

Upvotes: 0

bprasanna
bprasanna

Reputation: 2453

The issue is with height: auto; in .hero-cta-button span style. The auto height in IE is calculated for the document root instead of the wrapping anchor element.

Changing the value height: auto; to height: 20px; fixed the issue.

Working HTML example:

<!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>

Upvotes: 3

Related Questions