这两天在测试项目的浏览器兼容性，突然发现这么个问题，图片在firefox下是可以正常显示的，但是在IE下有2个不能显示。
不能显示的位置代码结构如下
<head>
<link href="../css.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="banner_content">
<div class="logo"></div>
<a class="banner_close" href="/eudisk/user/login/logout"></a>
</div>
</div>
</body>
css样式如下
#header { /*头部*/
background: url(images/header_bg.gif) repeat-x;
height:65px;
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 4;
}
.banner_content { /*头部居中部分*/
height: 65px;
width: 100%;
background:url(images/cpic/header_slogan.png) center 25px no-repeat;
}
.logo{
background: url(images/cpic/logo_cpic.png) 50px 12px no-repeat;
float: left;
width: 210px;
height:65px;
}
a.banner_close {
background:url("images/layout.png") no-repeat;
float: right;
height: 30px;
margin: 22px 30px 0 0;
width: 34px;
}
也就是说，最外层的div是给增加颜色图片的，然后banner_content部分显示文字，下面包含的两个div是为了显示2个分别左右浮动的小图片的。最终想要的效果是如下图
但是火狐下是可以正常显示的，IE下左右两个浮动的小图都不能显示。去论坛求助，找同事帮忙，都没能找到解决的办法。
后来同事说把div里图片做背景的方式换成img来显示。果然这样是可以的，而且只把一个换成img，两个都显示出来了。不知道是什么原因。我再尝试只是在div里加上空白的img，不是链接图片，而且设置成display：none，这样两个图片还是都可以显示的。
换成的样式是这样的<div class="logo"><img src="" style="display:none"></div> 还是不明白为什么会出现这个现象。只是目前解决了，希望各位读到这里，谁知道是为什么出现这个现象能给解释下。如果以后能弄明白的话再来这里更新。
扫一扫
5986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
