我在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%;
}