1

ロゴをSVG形式で指定し、要素<a>の周りにタグを付けました。objectしかし、私のアンカータグは、svgグラフィックの下に10pxの高さで表示されているだけでは機能しません。私のコードを見てください、それは私が話していることを明確に理解するでしょう..

<a href="#" class="logo">
<object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;">
<!--[if (gte IE 6)&(lte IE 8)]>
  <img src="images/tc_logo.png">
<![endif]-->
</object>
  </a>

そして私はロゴクラスを与えましdisplay:blockたが、それは機能していません。

CSS

.logo{
width: 100%;
height: 210px;
display: block;
cursor:pointer;
}

作成された編集

ついに私は1つの解決策を見つけました、私はそれが正しい方法ではないことを知っています、しかしあなたがSVGで後退する準備ができていないなら..これを試してください。

このようにhtmlを使用してください。

<span style="display:block; position:relative;">
<a href="#" class="logo"></a>
    <object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;">
    <!--[if (gte IE 6)&(lte IE 8)]>
      <img src="images/tc_logo.png">
    <![endif]-->
    </object>
</span>

そしてcssは..

.logo {
    display: block;
    height: 210px;
    position: absolute;
    width: 100%;
    z-index:9
}

あなたがトリックを得たことを願っています。

4

3 に答える 3

0

これを行うには、SVGをオブジェクトタグではなく画像タグにするか、このわずかなハックを回避することができます。

<a href="#" class="logo">
    <span style="display: block;">
        <object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;">
        <!--[if (gte IE 6)&(lte IE 8)]>
          <img src="images/tc_logo.png">
        <![endif]-->
        </object>
    </span>
</a>
于 2012-12-19T20:01:16.150 に答える
0

これが1つの醜い方法です：

<a href="#" class="logo">
    <![if gte IE 9]>
       <img src="images/tc_logo.svg">
    <![endif]>
    <!--[if lt IE 9]>
       <img src="images/tc_logo.png">
    <![endif]-->
</a>

ここに実例があります。

ただし、これは古いAndroidブラウザーでは機能しないため、svgサポートの欠如を検出したらすぐにすべてのsvgをpngフォールバックに置き換えるなど、他のオプションを検討することをお勧めします（javascriptが必要です）。たとえば、http ：//css-tricks.com/forums/discussion/19965/svg-with-png-fallback/p1を参照してください。

于 2012-12-20T13:58:28.580 に答える
0

または、CSSを使用してポインタイベントを削除することもできます。はobjectアンカータグイベントに取って代わるように見えるため、それを削除するとアンカータグが再度アクティブ化されるように見えます。

.logo object {pointer-events:none;}

今のところ、これを行うためにChromeのみを使用し、どこでもテストしなかったことに注意してください。

于 2014-08-04T23:39:11.693 に答える