Chinaunix首页 | 论坛 | 博客
  • 博客访问: 261707
  • 博文数量: 10
  • 博客积分: 256
  • 博客等级: 二等列兵
  • 技术积分: 737
  • 用 户 组: 普通用户
  • 注册时间: 2012-08-23 19:28
文章分类

全部博文(10)

文章存档

2016年(2)

2015年(2)

2014年(2)

2013年(3)

2012年(1)

分类: LINUX

2013-03-11 20:57:03

最近又在搞网页,调试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功能,所以...。
  • 阅读(3174) | 评论(0) | 转发(0) |
    给主人留下些什么吧!~~