1

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

http://brandonintermediate.spikeatschool.co.nz

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

在 IE9 中，SVG 最初是按比例显示的，但是一旦您将鼠标悬停在列表中那个较大的按钮上，它就会以某种方式意识到它需要拉伸 SVG 以适应该区域，然后还会以正常大小正确显示功能区末端按钮。我不确定这里发生了什么，并且已经尝试了几种方法来修复它。我希望它不会太难修复。这是与 SVG 代码一起创建效果的 CSS：

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

1 回答 1

0

结束了这个：

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

于 2013-05-06T10:29:15.063 回答