IE6调试心得

最近刚完成一个“复杂”的项目,其实项目本身不复杂,只是需求没有计划,跟着领导思路不停的变化,并且只给我们正常开发1/2~/1/5时间,使得技术人员疲惫不堪,现在开发基本完成,突然说因某重要领导使用IE6浏览器电脑,并且分辩率是 1024×768,要求我们对所有页面ie6支持,最变态的是只给不到一周时间。这个消息惊得我们措手不及,我明确表示一周时间完成不了,最多只能完成 60~80%或。然并卵!
即然事实已经摆在面前,挣扎无益,就开整吧。首先到哪里找IE6浏览器!
1、ieTeset 软件在现在的win10 64位电脑上,打开就崩溃(以前win7或xp时,是可以用的);
2、用IE自带的调试工具下的仿真模试,几台不同电脑展求效果各不相同;
3、只能用一台电脑装系统,或用虚拟机的方式。考虑到同时操作两台电脑不方便,最后确定使用虚拟机。
我尝试安装了 VMware 和  oracleVM 两款虚拟机,VMware 普及度比较广,资料文档教程比较多,oracleVM性能更优,速度目测快50%,推荐oracleVM。
然后就是装系统,第一次我装的是ghost版winxp sp3,装机后看到是IE8,无法降级,失败。难道IE6是 win98系统自带,第二次尝安装win98,看到熟悉的图面,自己都有点感动,不知不觉已过了20年,20年前的我在做什么?装好之后发现是IE5,再次失败。第三次我安装的是 winxp 安装版,成功。
oracleVM 虚拟机开源免费全中文,使用无难度,只需要注意“网络 – 连接方式”,我选择“网络地址转接(NAT)”,就可以共享上网。另外,在菜单项“设备”-“安装增强功能”,就可支持当前电脑与虚拟机之间复制粘帖和文件窗口拖动。
运行方法就比较简单,如果是 tomcat 运行java,只需在IE浏览器输自己电脑的IP、端口号、路径。如果是调试静态页面,点开始-运行菜单,输入 \\自己的主机IP,就可以访问自己的电脑(要开共享,不然看不到硬盘),直接运行HTML页面。
注意IE6是没有f12、firebug、开发者工具等,只能装一个 Debugbar,定位JS问题位置和报错提示,HTML和CSS问题,只能凭感觉。
对于IE6具体调试细节,这里就不展开介绍,只说一下思路:
1、如果明确需要完美支持IE6,那建议在IE6开发,向上做版本扩展;(基本低版本支持,高版本不会有问题)
2、如果是开发完成,需要追加支持IE6,建议用判断浏览器的补丁方式追加,不要动结构,做好注释,注意解耦;(具体判断方法见下文)
3、复杂位置,可以用表格来布局,不用太拘泥规范标准;
4、jquery 只支持 1.4以下版本;
5、不支持 css3、html5,最好不用滤镜 filter,会使页面假死、崩溃;
6、良好的代码写写规范,扎实的前端功底,能免去很多奇萌问题。
HTML 的 IE6判断方式:
<!–[if IE 6]>
    <link rel=”stylesheet” type=”text/css” href=”common/css/ie6.css”/>
<![endif]–>
CSS 的 IE6判断方式,用HACK解决
javascript 的 IE6判断方式:
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
if (isIE6){
//代码
    }
jQuery 的 IE6判断方式:
if ($.browser.msie &&
($.browser.version == “6.0”) && !$.support.style) {
//代码
}
一些小问题:
1、border-bottom:1px solid #CCC 不起作用,但border:1px solid #CCC 起作用。 解决方案,追加一条_display:inline-block;
2、我一直以为 background-color有一条属性 none,实际上只有 transparent 透明(无),或 inherit (继承)属性,只有display 有 none 属性;
3、z-index 无效问题,最好的方法是直接调整代码先后顺序,或把浮动层停在页头或页尾,用JS定位;

4、png图片半透明解决方法,图片少用gif代替,图片多用DD_belatedPNG.js ;
5、清除浮动方式有多种,ie6 推荐用伪类方式。见下文:

 

伪类清除浮动方式:

.clearfix:before,.clearfix:after{display: table;content: ” “;}
.clearfix:after{clear: both;}

总结,IE6并不可怕只是繁琐,掌握了IE6的调试方法和思想,基本上其它浏览器都可以搞定,只是时间和工作量问题。前端技术对一个人的综合能力要求非常高,需要的不单是技术能力,更多是方法、心态、规代等综合能力。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注