您的位置：首页 > 其它

IE8下标签float导致的bug。

2016-05-10 20:41 253 查看
前几天帮朋友写一个页面，今天在IE8下面发现一个很奇葩的问题，给a标签添加了float:left之后a标签内的图片不显示了，去掉float:left之后就能正常显示。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
max-width:100%;
width:200px;
border:none;
}
a{
float:left;
}
</style>
</head>
<body>
<a href="javascript:;"><img src="arrow-left.png"></a>
</body>
</html>


这种情况下，在IE8中图片不会显示。

通过给a标签添加border:1px solid black;可以看到边框都合并到一起了，可以看出a标签的宽度是0。

去掉 img的max-width:100%; 图片正常显示。

或者去掉img的width:200px;图片也能正常显示。

具体不知道什么原因，之后测试了一下在div下也会出现同样的问题。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航