新人浅谈IE6兼容

最新推荐文章于 2024-11-10 11:49:10 发布

awwwy

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量349

点赞数

文章标签： css ie6 优化前端浏览器

本文链接：https://blog.csdn.net/awwwy/article/details/45404269

版权

近期对div+css进行了学习，遇到了一些关于IE6中存在的兼容性的问题，决定将我所遇到的IE6问题汇总一下，然后通过从网上查阅资料来补充一些经常会遇到的兼容性的问题以及如何解决的方法。

1. 对于IE浏览器和其它浏览器兼容问题我们需要使用到css hack技术：

color:#00f; /*通用* 蓝色/

color:#f0f\0; /* IE浏览器粉色 */

color:#f00\9; /* IE浏览器6-10 红色 */

color:#f0f\9\0; /* IE浏览器9-10 粉色 */

*color:#f00; /* IE浏览器6-7 红色 */

}

2. 制作页面的时候，最小宽度的问题：针对要求占屏幕100%的div或者背景而言，除了需要设置width:100%;还需要给其div或背景图增加一个min-width：1200px; 的属性，保证其在IE中最大化窗口后可以正常显示，缩小窗口时仍然占满屏幕，不能出现背景图缺失。但是最小宽度在IE6下存在兼容问题，可以通过写：

.min_width{min-width:300px; _width:expression(document.body.clientWidth< 300 ? "300px" : "auto");}

_width: expression (this . offsetWidth < 150 ?"150px":"auto");

_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");

三种方式尝试解决问题，但还存在一点点漏洞，需要深入学习；写完的页面需要放到小窗口里测试一下，注意自适应、百分比、最小宽度之类的问题；除了最小宽度问题同理可以引申出最大宽度和最小高度之类的问题：

最小宽度：div { width:100%; min-width:1000px; max-width:1200px;

width:expression_r(Math.max(1000,Math.min(1200,document.body.offsetWidth*0.99))+"px");

最小高度：div{min-height:100px; height : auto !important; height:100px; overflow: visible; }

3. 在ul li下若要添加小圆点之类的东西，最好不要使用原始的list-style-type;因为如：在IE6下会将实心圆disc显示成空心圆，不稳定；可令list-style-type：none；然后用PS作出图片后添加背景图片，用例如：list-style-image: url(../images/logo00.jpg)；插图；

4. PNG图出现的问题：在平时制作网页插入图片时经常会有一些关于图片格式以及IE6情况下的兼容问题。首先说说GIF和JPEG格式的两类图片的区别：GIF图片保存出来的图会比PNG图片边缘带的锯齿更明显一些，因此通常情况下我们是建议使用PNG图片的，但是png图片在IE6下背景并非是透明的，因此需要处理一些兼容性的问题，以下是我学习到的几种小方法：（1）最简单的一种方法就是在PS里保存PNG格式的时候尽量使用PNG-8，且加个描边之类的，减小锯齿的严重程度；（2）.对于兼容IE6css,可以专门针对IE6写一些语句，即属性前面带一个"_"即可；例如：_color:#333;_margin-top:20px；因此如果是在IE6中有PNG的背景图可以对IE6使用GIF背景图，对其它浏览器使用PNG背景图；例如：

.conimg{width:1200px;height:158px;margin-top:40px;background:url(images/liucheng_img.png) no-repeat; _background:url(images/liucheng_img.gif)no-repeat;}

（其中需要注意的是：background语句一定要写在_background语句之前，否则将无法实现在IE6下使用GIF图；）；（3）. 通过JS脚本实现判断浏览器版本问题（是IE6还是不是IE6），对IE6使用GIF格式图片；对其它浏览器使用PNG图片；代码如下：

<scripttype="text/javascript">

varbrowser=navigator.appName

varb_version=navigator.appVersion

version=b_version.split(";");

vartrim_Version=version[1].replace(/[ ]/g,"");

if(browser=="MicrosoftInternet Explorer" && trim_Version=="MSIE6.0"){

alert("IE6.0");

$(".png").hide();

$(".gif").show();

}

else{ alert("非IE6.0");