`
xiaoluode
  • 浏览: 13634 次
  • 来自: 深圳
社区版块
存档分类
最新评论

IE6超链接内联图片失效bug

阅读更多
<style type="text/css">
a{
	text-decoration:none;
}
a img{ /* 默认隐藏图片 */
	display:none;
	border:none;
}
a:hover img{  /* 鼠标经过时,显示图片 */
	display:inline;
}
</style>
</head>

<body>
<a href="#">菜单项目<img src="images/icon1.png" /></a>
</body>

 

 IE6下鼠标经过不显示图片:

 IE7下鼠标经过显示正常:

 

为什么会如此呢?是因为ie6在a元素的hover伪类不具有Layout特性。

解决方法:通过css激活伪类的Layout特性,给a:hover设置zoom:1

a:hover{
       zoom:1;
}

 

问题解决,图片正常显示

 

  • 大小: 26.2 KB
  • 大小: 27.4 KB
  • 大小: 29 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics