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

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
分享到:
评论

相关推荐

    面试题库.docx

    10. **IE6 Bug解决方法**:双边距Bug、3像素问题、超链接hover失效、z-index问题、PNG透明、min-height、select遮盖等,需要针对性的CSS hack或JavaScript解决方案。 11. **title与alt属性**:`alt`属性为图片提供...

    2016前端面试题及答案.docx

    10. **IE6常见bug及解决方法**:包括双边距问题、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题和select遮盖问题。 11. **title与alt属性**:title提供鼠标悬停时的提示信息,alt是在图片...

    2016前端面试题及答案.pdf

    10. **IE6常见bug的解决方法**:双边距bug通过display属性解决,3像素问题使用display:inline,超链接hover失效需调整顺序,z-index问题给父级设置position,PNG透明问题用js,min-height使用!important,select遮盖...

    最新史上最全前端面试题(含答案).docx

    10. **IE6常见BUG及解决方案**:双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题、1px宽度容器问题等,通过各种CSS技巧或JavaScript解决。 11. **标签title与...

    史上最全前端面试题(含答案).docx

    10. **IE6常见问题及解决方法**:包括双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题以及select遮盖问题等,这些问题通常需要针对IE6的特性进行特殊处理。 11. **img标签的...

    前端面试题大集合

    - **IE6的常见BUG**: - 双边距BUG:使用`display: block`。 - 3像素问题:使用`display: inline-block`。 - 超链接hover点击后失效:使用正确的CSS顺序。 - z-index问题:给父级添加`position: relative`。 - ...

    web前端面试题1

    10. **IE6常见BUG及解决方法**:包括双边距问题、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题,以及1像素宽度容器问题。 11. **title与alt属性**:`title`用于鼠标悬停...

    超文标记语言

    - **无法定义1px宽度容器**:IE6默认的行高会导致1px宽度的问题,可以通过调整`overflow`属性来解决。 #### 十一、`&lt;img&gt;`标签上的`title`与`alt`属性 - **`alt`属性**:当图片无法显示时,浏览器会显示`alt`属性...

Global site tag (gtag.js) - Google Analytics