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>

主な違いは、background-sizeプロパティでした。これはFirefoxでも修正されました。

于 2013-05-06T10:29:15.063 に答える