我以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
}
希望你能得到诀窍..
答案 0 :(得分: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>
答案 1 :(得分: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>
直播example here。
这对旧的Android浏览器不起作用,所以最好调查其他选项,例如一旦检测到缺少svg支持(需要javascript),就用png后备替换所有svgs。请参见例如http://css-tricks.com/forums/discussion/19965/svg-with-png-fallback/p1。
答案 2 :(得分:0)
或者,您可以使用CSS删除指针事件。 object
似乎取代了锚标记事件,因此删除它似乎会重新激活锚标记:
.logo object {pointer-events:none;}
请注意,我目前只使用Chrome来执行此操作,并未在任何地方对其进行测试。