Inline SVGs in IE Adding Extra Height
I am having a problem with SVG files not displaying correctly in IE browser. The icons display the correct size, but in IE they seem to create a huge box around them that twists the layout. The SVGs I used with the img src tag don't seem to do the same and work correctly.
This is just with inline SVGs creating a ton of extra height space. I've tried all sorts of height and width changes, wrapping the span around 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%;
}
source to share
The problem is the style height: auto;
in .hero-cta-button span
. auto
IE's height is calculated at the document root instead of the wrapper element anchor
.
Changing the value height: auto;
to height: 20px;
fixes the problem.
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>
source to share