IE6兼容性问题三则

问题:IE6下,上下两个li标签之间有空隙。
解决:使用float:left;clear:left;

问题:外层使用margin-left了,使用ul+li,li标签下面是一个a标签,对li和a标签设置了同样的宽和高。导致ie6下li的宽度增大。
解决:给a标签添加display:inline;

问题:ie6页面中有select选择框时,弹层不能遮盖。
解决:针对ie6,添加透明iframe。
代码如下:

    //注册弹窗处理ie6
    if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
        $('.box').prepend('');
    }

IE6 Bug之select动态赋值

问题:使用ie测试时发现一处脚本报错,经过alert排查出引发问题的代码。此代码在其他浏览器下正常,但是ie6下报错。

排查:与技术沟通确认代码功能是将select最新服务器设为选中状态。服务器列表是动态生成的。

解决直接上代码:

        if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
            window.setTimeout(function(){//ie6需要稍微延迟  
                groupSelect.val(max_groupId);  
            }, 0);  
        }else{
            groupSelect.val(max_groupId)
        }

原因:因为在往select中动态添加option时,浏览器执行javascript设置select的属性的时候浏览器可能还没将它们渲染到页面中(ie6),因此使用setTimeout可以使浏览器渲染线程先将元素渲染到页面中区,再使用javascript线程执行改变它们属性的操作。

参考:
http://snailxr.iteye.com/blog/1300173

解决由ie6事件引起的页面无响应问题

处理一个文本框验证,验证逻辑为:文本框获得焦点时,保存按钮点亮;文本框失去焦点时,验证格式,格式不对时,显示错误信息,保存按钮置灰,格式正确进行保存验证。

问题描述:

在ie6下,当鼠标离开文本框,验证错误时,点击保存按钮,页面无响应,其他浏览器正常。

解决流程:

初步判定为ie6事件问题,当发生blur事件时,保存按钮应为不可点。但是有了保存事件,此时又验证到blur事件,又变回了不可点的状态,导致事件混乱,出现问题。
确定问题后,进行解决。
1、增加标识符判断,在离开文本框时添加状态符。在表单提交验证时,根据状态符进行后续操作,若为false时,不执行保存事件。
2、在验证不通过发生时,使用setTimeout进行延时处理,解决ie6执行顺序问题。

延时代码:

viewErr : function(subBut, dl, msg){
    setTimeout(function(){
        if(subBut) subBut.attr('disabled',"disabled").addClass('disabled');
        dl.find('p.t').hide();
        dl.find('p.e').html(''+msg).show();
    }, 500);
},

设置标识符:

input.blur(function(){
    suc = false;
    var in_text = input.val();
    var sum = NJS.textL(in_text);
    if (sum > 0 && iName != 'signature' && !NJS.isText(in_text)){
        that.profileUtil.viewErr(subBut, dl, errorTips[iName][1]);
    }else if(minL && sum >= 0 && sum < minL){
        //姓名过短的错误提示
        that.profileUtil.viewErr(subBut, dl, errorTips[iName][2]);
    }else if(sum > maxL){
        //姓名过长的错误提示
        that.profileUtil.viewErr(subBut, dl, errorTips[iName][0]);
    }else{
        suc = true;
    }
});

//表单提交的校验
form.submit(function(){
    if(!suc){
        return false;
    }
}

IE6中由于Flash的加载影响输入框焦点

最近开发过程中,发现一个奇怪的问题.

在优酷上,光标点在搜索输入框,过一会儿会失去焦点.IE7,FireFox,Chrome上都没有这个问题,唯独IE6上出现。经过一段时间的排查,发现IE6中,在加载完Flash后,会把焦点定位到Flash上,从而使input输入框失去焦点。

问题代码:

<html>
<head>
<script language=”javascript”>
function change_div(){
var turn1 = document.getElementByIdx(“div_a”);
var turn2 = document.getElementByIdx(“div_b”);
turn1.style.display = turn2.style.display;
turn2.style.display = (turn2.style.display == “none”) ? “block”:”none”;
}
function init(){
setInterval(change_div,3000);
}
</script>
</head>
<body onLoad=”init()”>

<input type=”text” id=”keyword”/>

<div id=”div_a”>aaaaaaaaaa</div>
<div id=”div_b” style=”display:none”>

<object type=”application/x-shockwave-flash” ..  //Flash插件代码

</div>

</body>
</html>

以上是每隔三秒div_a和div_b显示相互切换。

页面显示后,鼠标点击keyword文本输入框,三秒后,由于显示了div_b,并且里面带有flash,此时keyword会失去焦点。这应该是IE6 的bug。

解决方法:

将div_a和div_b的innerHTML赋值给两个变量,只用一个div,变换的时候改变其innerHTML值即可。

另外注意带有flash的innerHTML赋值过去后,可能会改变div尺寸,会有一像素一变化,这也应该是IE6的bug,可能需要用js动态调整 flash尺寸。

来自: http://hi.baidu.com/qiaoyuetian/blog/item/51c6783ebb3a91f7828b135f.html 

css绝对定位在ie6下的bug解决方法

position:absolute定位在IE6下存在left和bottom的定位错误问题,解决办法有三种:
1、给父层设置zoom:1触发layout;
2、给父层设置宽度(width);
3、给父层设置高度(height);

IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout:
1、position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题
2、float:left|right 由于layout元素的特性,浮动模型会有很多怪异的表现
3、display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
4、width: 除auto外的任何值
5、height: 除auto外的任何值
6、zoom: 除auto外的任何值

IE6/7绝对定位元素神秘消失或被遮挡的解决

  在进行网页布局设计的时候,经常会根据需要设置相对定位,绝对以及浮动定位最近突然发现了一个奇妙的现象:IE6下绝对定位元素神秘消失或被遮挡, 首先是IE绝对定位元素神秘消失,设置的绝对定位元素,突然从IE浏览器下消失了,然而火狐能正常显示. 尝试对绝对定位元素进行清除浮动操作,IE下能显示,但是出现了莫名的留白,火狐下正常显示.至少这个现象表明,绝对定位元素在IE6下神秘消失对相邻元素的浮动定位有关.

  查了相关资料,高人有这样的解释:

  1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致;
  2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;
  3.当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示;
  4.当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;

  要解决这个BUG的方法也很简单,让绝对定位层不挨着浮动层放置就好了,还有个更简单的方法,在绝对定位元素和其他元素之间加一个空白的div。

  再来看看绝对定位元素神秘消失被遮挡的现象,先了解一下所涉及到的几个定位特性:
  1. 相对定位元素默认的z-index的数值是0。
  2. 当两个相对定位同时出现时,代码靠后的z-index优先。
  3. 子级遵循父级设定的z-index;如果子级设定了绝对定位、z-index,可以冲破父级显示
  看下面的代码:

 <div style=”position:relative; background:#FF0000; width:200px; height:100px;”>
     <div style=”position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100“></div>
</div>
<div style=”position:relative; background:#000000; width:200px; height:100px;”></div>
<div style=”position:relative; background:#9900FF; width:200px; height:100px;”></div>

  代码解释:上面是三个相邻的相对定位的层,在第一个层里加了个相对其绝对定位的层,按照理论,这个绝对定位的元素是在三个相对定位元素之上的,但是,实际却没有显示。尝试设置z-index值也没有效。

  网上解决这个bug的办法一般用hack使B为负值,来降低 B 在IE下级别。但是这种方法在z-index为负值时,产生了新的ie bug按照定位的特性,ie的这个bug是可以回避。

  从表面上看下面的层 遮住了上面的绝对定位层,实际上是下面的 层遮住了绝对定位的的父级层,只要将 该父级层的z-index设定大于后面的层即可。

文章引用地址:http://www.iefans.net/ie-juedui-dingwei-yuansu-xiaoshi/ 作者:iefans