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;
}

进行的编辑

最后我找到了一个解决方案，我知道它不是正确的方法，但如果你还没有准备好退一步使用 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

这是一种丑陋的方式：

<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 支持（需要 javascript），就将所有 svg 替换为 png 后备。参见例如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 回答