css - IE9 最初无法识别带有 SVG 背景图像的伪元素的高度

Question

我有一个奇怪的问题，最好通过查看 IE9 中的实际示例来解释:

http://brandonintermediate.spikeatschool.co.nz

请注意，“ super ”或悬停状态在索引栏按钮的右侧有一个白色三 Angular 形，它创建了一个带状结束效果。

在 IE9 中，SVG 最初是按比例显示的，但是当你将鼠标悬停在列表中那个更大的按钮上时，它会以某种方式意识到它需要拉伸(stretch) SVG 以适合该区域，然后还会正确显示功能区末端在正常大小的按钮上也是如此。我不确定这里发生了什么，并且已经尝试了几种方法来修复它。我希望修复起来不会太难。下面是创建效果的 CSS 以及 SVG 代码:

nav#main ul li a:hover {
  color: #FFFFFF;
  background: #333333;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000));
  background: -webkit-linear-gradient(#333333, #000000);
  background: -moz-linear-gradient(#333333, #000000);
  background: -o-linear-gradient(#333333, #000000);
  background: linear-gradient(#333333, #000000);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF333333', endColorstr='#FF000000');
  margin: 0 -5px 0 -20px;
  padding: 6px 14px 6px 29px;
  position: relative;
}

nav#main ul li a:hover:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 0px;
  width: 5px;
  height: 100%;
  background-image: url("triangle.svg");
  background-size: auto;
  background-color: transparent;
  background-repeat: no-repeat;
}


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="m100,0 l0,100 l-100,-50 l100,-50z" stroke-width="0" fill="#FFFFFF"/>
</svg>

Answer 1

最后是这样的:

&:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background-image: url('triangle.svg');
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="m100,0 l0,100 l-100,-50 l100,-50z" stroke-width="0" fill="#FFFFFF"/>
</svg>

主要区别在于背景大小属性。这也在 Firefox 中修复了它。