IE6浏览器兼容性-png透明图片div间距

作者 FarLee 2010年4月5日 3:32:37   ‖浏览(27,391)

偶然在流量统计后台看到使用IE6浏览器的访问用户竟然占了10%以上,和firefox等现代浏览器兼容性最差的ie6最让人头痛了。

使用浏览器兼容性检测工具NetRendererBrowsershots 在线检测了WordPress博客首页的兼容性,发现在IE6下主要有两个问题:

IE6兼容性:DIV之间多出的间距

头部Logo和728宽度的Google 广告这两个div之间,以及嵌套的div之间均存在3px的间距,导致了google adsense广告图片被撑到了下面一行。HTML代码如下:

<div id="header2">
<div id="header">
<div id="logo">
<h1 id="title"><a href=""><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
<div id="gad">
<script type="text/javascript">
</script>
</div>
</div>
</div>

logo这个div向左浮动,gad这个div向右浮动,主要的CSS样式设置如下:

#header {
height:90px;
margin:0 auto;
padding: 0;
width: 1001px;
}

#header2{
height:90px;
padding: 0;
}

#logo{
float:left;
width: 263px;
height: 75px;
display:block;
margin-top: 15px;
margin-left:10px;
/* margin-right: -10px;  */
border: 0;
}
#gad{
float:right; /* width:728px; */
}

header和logo之间,logo和gad,dad和header之间均会产生3px的间距,因此可以将logo的width减少,或者margin-left的值下降10px,或者设置一个负数的margin-right; 。然后在IE6下,google广告图片才会显示在Logo同一行的右边。

IE6兼容性:不支持PNG透明图片

第二个问题是IE6不支持PNG透明图片,导致页面上插入的PNG图片背景颜色为黑色,而不是透明的。这里解决兼容性的方法一般有两种:使用透明CSS滤镜、JS代码。可以去网上搜一下js代码,挺多的。

如果是PNG透明图片当作网页背景图片(background),这时候方便用CSS滤镜filter或JS代码。如果是插入在网页中的PNG图片(img标签),换成gif透明又会带有有锯齿。最后用最老实的方法,将png透明图片的画布颜色设置成和网页背景一样,导出jpg格式,也能达到和PNG透明图片一样的效果。

最后看看最近一个月访问用户使用的浏览器比例:

Firefox 37.84%
MSIE 7.0 13.51%
MSIE 6.0 11.65%
Chrome 10.31%
MSIE 8.0 7.51%
360安全浏览器 7.32%
Maxthon 6.06%
TheWorld 2.24%
sogou 1.78%
TencentTraveler 1.20%
Safari 0.55%
MSIE 5.5 0.03%

Firefox 居多,其次是IE7 。 IE6.0和Chrome 都在10%左右。


“IE6浏览器兼容性-png透明图片div间距”文章评论(7)

  1. 哇,FF的占了那么多啊,以前很喜欢用FF,好久没关注了,现在用IE+Chrome。

    • 我用Ubuntu不能用IE只能用FF,Chrome挺酷挺快挺有前途。

      • I love statement nekceacls! The one you pick out is pretty. Yeah Olivia always has really nice necklaces, that's one of the first things I noticed when I see her on "The City"

  2. 记得有一个JS可以解决IE6所有问题

    • 这个js挺方便的,据说还有官方的阿?

Trackbacks/Pingbacks

  1. IE6浏览器兼容性-png透明图片div间距 | Art204 圈外设计
  2. IE6浏览器兼容性-png透明图片div间距 | 75号工坊

来说兩句