Css IE9最初不使用SVG背景图像识别伪元素的高度

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

请注意，“uber”或悬停状态在indexbar按钮的右侧有一个白色三角形，用于创建功能区结束效果

在IE9中，SVG最初是按比例显示的，但当您将鼠标悬停在列表中较大的按钮上时，它不知何故意识到需要拉伸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>

结果是：

&: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中修复了它