网页调错部分总结

最近又在搞网页，调试php+js做的网站在ie6~ie8，chrome，Firefox上的兼容性，遇到一些问题，记录下来。
1、报错：TypeError: endir[(endir.length - 1)] is undefined
解决：endir是检测设备的，如果没有检测到设备，那么length就为0，无法继续。

这是一个js的初级错误，在ie6下直接弹出一个弹出框。但是在高级的浏览器都不会，它是一个因为编码的童鞋没有用比较好的浏览器+好的调试工具使得这个问题一直存在，所以推荐“Firefox+firebug”组合，这个组合用好了感觉比ie调试来的效率高的多。谈到工具，我又记起来，IEtest用起来不怎么好使，特别是模拟调试ie6时，所以我用了一款debugbar，网上找到破解码使得调试进度快了好多（之前找这个工具的能用的破解码和版本花了比较多时间），但有个词叫磨刀不误砍柴工嘛。然后又想推荐一个Beyond compare，差异比较工具，个人感觉对于更新svn等代码管理工具他是必不可少的。

2、报错：An error has occurred in the script on this page  Do you want to continue running scripts on this page
解决： 逐步查找出错的js文件，然后在文件把文件的编码方式由“ ANSI”改成“UTF-8编码格式的”，然后还去掉了中文注释才OK的
这个问题和上一个问题差不多，被高级浏览器直接屏蔽了错误，i6不吃这套，磅的一下就给弹出来了，才成了急需解决的问题。

3、报错：css里显示的位置不受到所包含的css类的属性修改而修改，页面元素位置总是不对
解决：一般都是因为元素位置的定义或者是在上层css的限制，或者是同时受到两个css类对其属性进行控制。解决方法就是仔细找到其中一个不合适的去掉即可。

4、报错：ie6上，鼠标移动到元素（一个带href的a标签上）上面，hover属性不能正图常改变标，active属性也不能正图常改变标。
解决：经排查，最终确定是在htm文件中的href写错了，写成了herf！这个问题可能还需要有些处理，很多人就说ie6对这个属性的支持不够会带来此类问题，但是IEtest上没有这个问题。

active属性在ie6下与onfocus="blur()"有冲突，去掉onfocus之后active即可正常显示
“hover问题”分析方法：确定所用的技术点为“hover”，查找ie6是否兼容css伪类“hover”，查找hover用法，把例子嵌入源码中，查看效果（兼容），模仿例子修改源码，最终在源码处找到了相应的错误。
之前用百度搜索“hover ie6”本以为是比较好的关键字，最后发现被网上好多相关的文章误导，大汗了一把。其实错的不是他们，而是我要解决兼容问题却产生了思维定式，以为bug只出在兼容问题，却没有想到编码童鞋的粗心会被chrome，Firefox等比较新的浏览器直接给弥补掉了，但是却ie6却没有这么好的处理。
（ps：这个过程中值得一提的是，鼠标左键一直**，有时选得起，有时选不起）。

5、报错：一个div下的几个div图片选择，当点击时图片在ie6下显示不整齐，其他高级浏览器显示整齐
解决：问题出在图片的大小不一致：有三个图片是一致的，20*17像素的，另外两个不以言，i7以上高级浏览器都能自己处理让它们对齐，i6没有做这个处理。解决办法，用fireworks修改原png图使得每个图片的大小都一是20*17像素即可。

今天出现了一个很喜剧的问题：我在一个服务器上看和改源码，并另一个服务器上看运行效果。直接弄了一个多小时，一直郁闷为啥改了一点效果都没有。等发现这个“现象”之后，我在同一个服务器上改web源码和看效果，很快就确认了问题出处并找到了解决办法。

6、报错：页面弹出框层次在chrome下正常，在ie6、ie8下不正常：upload_container为父元素，upload_container div为子元素，两元素在一开始display：none，之后类似于弹出框，被以前的页面遮挡了一部分。
原因：z-index属性影响。添加如下式样，便能解决。
#upload_container{_margin-top: -240px; position:relative;z-index:5;clear: both;}
#upload_container div{/*position:relative;*/z-index:6;margin-bottom:-10px;}

之前遇到弹出框问题和这个不一样，这个问题确实与z-index属性有关，但是却不是网上好多人说的那样的原因。

7、报错：一个链接图标在Firefox等高级浏览器下能正常显示，ie6下找不到
解决：不知道为什么图标有一个left:100px;属性，然后图标就跑到ie6的最右边看不到的地方去了。ie6.css下改成left:0px;即可

这个问题和之前的问题弄在ietest上和实际ie6上有差异，所以最终就装了一个xp的虚拟机，调屏幕分辨率到1280*768。然后再给ie6装一个IEDevToolbar，调试页面位置比ietest下debugbar还好用一些，debugbar有一些不实用的属性也给显示在那里，进而加大了分析错误的难度。

8、报错：错误的表象如上，ie6鼠标移动到button上不能显示hover效果。
解决;错误原因最终确定是hover放在了

标签后，而不是标签后，导致hover不能正常工作，修正方式：
div#torre ul li:hover a {
background-position: right -17px;
}
改为：
div#torre ul li a:hover {
background-position: right -17px;
}

9、问题：js检测浏览器是否为ie6：
if(window.XMLHttpRequest){//Mozilla, Safari,IE7
    if(!window.ActiveXObject){// Mozilla,Safari,
        ;//alert('Mozilla,Safari');
    }else{
        ;//alert('IE7');
    }
}else{
    is_IE6=1//alert('IE6');
}

10、报错：ie6子元素选择“>”不起作用
解决：直接把“>”换成“ ”即可

11、报错：ie6非a标签不支持hover
解决：一对一解决，添加hover_deal.js，其中代码如下，其中“div#torrent_filter_bar ul li”是html中需要用到hover、active的html元素

/*以下是hover在ie6下不工作，div_torrent_filter_bar_ul_li_hover为hover动作需要变成的css类*/
jQuery(document).ready(function($){
$("div#torrent_filter_bar ul li").hover(function() {
$(this).addClass("div_torrent_filter_bar_ul_li_hover");
},function(){
$(this).removeClass("div_torrent_filter_bar_ul_li_hover");
});
});
/*hover在ie6下不工作*/

/*以下是active在ie6下不工作*/
jQuery(document).ready(function($){
$('div#torrent_filter_bar ul li').mousedown(function(){
$(this).addClass("div_torrent_filter_bar_ul_li_active");
});
});

jQuery(document).ready(function($){
$('div#torrent_filter_bar ul li').mouseup(function(){
$(this).removeClass("div_torrent_filter_bar_ul_li_active");
}).click(function(){
;
});
});
/*active在ie6下不工作*/

ie6下伪类active无效在网上搜索的结果很少，这里提供一个思路：css确实不能解决的ie6兼容问题可以用jQuery轻松解决。另外：现在测试网上用来解决ie6兼容伪类haver的haver.htc文件基本无效，而且ie6下a标签对hover能很好的支持，还有的代码虽然能够很好的改善ie6对非a标签的支持，但会影响到select属性或者其他模块的js功能，所以...。