程序博客网 > 淘宝虚拟宝贝的类目

IE6bug汇总

来源：互联网 发布：淘宝虚拟宝贝的类目 编辑：程序博客网 时间：2024/06/05 04:17

原文http://www.jackyrao.com/archives/94?i=2

一直想搞个IE6 bug汇总，苦于没多少时间集中弄。所以就工作中慢慢积累吧，碰到一个写一个，后期再慢慢整理。

一、IE6父级元素不定宽，子元素绝对定位bug。 

这个bug描述说不清楚，直接上测试代码 ：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>IE6 Bug Test</title>
<style>
*{ margin:0px; padding:0px;}
body{font: 16px/1.4 tahoma,arial,'宋体';}
.wrap{ width:184px; margin:0 auto; background-color:#ccc; padding:0px 50px;}
.content{ position:relative;}
span{ display:block; width:50px; height:50px; background-color:#f00; position:absolute; top:0px;}
span.left{ left:0px;}
span.right{ right:0px;}
</style>
</head>
<body>
<divclass="wrap">                           <!-- 定宽, 有padding -->
    <divclass="content">                <!-- position:relative; 不定宽 -->
        我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字
        <spanclass="left">左</span>        <!-- position:absolute -->
        <spanclass="right">右</span>           <!-- position:absolute -->
    </div>
</div>
</body>
</html>

两个span元素分别为左右两个绝对定位的块，其父级content为不定宽的相对定位元素。content的父级定宽，有50像素左右padding。按道理讲，content元素的宽为其父级的width，高被其文字内容撑开，所以左右span定位没啥问题。但IE6的解析奇葩了，右span居然定位到了它爷爷级元素wrap上…如图：

上图为火狐，下图为IE6。

解决方法：
1、父级元素（例中的content）加上 _zoom:1， 触发IE6的haslayout。
2、父级元素（例中的content）定宽，设置固定的width或width:100%（某些情况下，设置width:100%可能无效）。

 

二、双外边距bug

这个太常见了。浮动元素设置了外边距margin，IE6会呈现为双倍的距离。

解决方法：
1、该元素加上 _display:inline。
2、_margin:一半的边距。

 

三、不支持max-width/height、min-width/heght

有时候为了不让内部img图片过大撑开外层而影响布局，我们需要设置外层的overflow:hidden，但这样，里面的内容就被裁掉一块了。而设置滚动条的话又太难看，所以我们就要用到限定最大/小的高度和宽度。如你所想，IE6不识别这个。

不支持max-width/height的解决方法：
1、限宽的元素css中加上 _width: expression(this.offsetWidth > 500 ? "500px" : this.offsetWidth + "px") 。两个500修改为需要限定的值，限定高度同理：_height: expression(this.offsetHeight > 500 ? "500px" : this.offsetHeight + "px") 。该法css中使用了表达式，会导致很高的cpu占用率，不过高就高嘛，谁让你用ie6，卡死你！
2、js解决：

1
2
3
4
5
6
7
8
functionresizeImg(img){ 
        varimage=newImage(); 
        image.src = img.src; 
        if(image.width > 500 || image.width <= 0) 
            img.style.width = 500 + "px"; 
        else 
             img.style.width = image.width + "px"; 
}

不支持min-width/height的解决方法：
1、利用IE6的特性，直接_width:500px或_height:500px即可，IE6中外层元素会自动被内容撑开而不管其设置的width/height。
2、同上max-width/height的解决方法。

 

四、png图片alpha透明

IE6只支持png-8或gif格式的布尔透明，alpha透明图片显示会呈现灰底，极其难看让人抓狂。

解决方法：
1、http://www.w3cfuns.com/thread-297-1-1.html   这里注意：使用滤镜解决方案时，在IETester的IE6下是看不到效果的，应使用原生IE6调试。我一般使用DD_belatedPNG解决方案，非常给力。
2、尽量避免使用png24/png32图片(PS中png24 = FW中png32 = FW中png24 + alpha)，图片颜色数较少时，可以使用gif或者png-8格式代替。需要在生成图片时设置杂边（FW中叫色板）为背景颜色，否则会产生毛边。

 

五、z-index层级bug(IE7也有此问题)

在定位元素（相对定位或绝对定位）比较多，层级较复杂时，IE6的显示效果可能与其他浏览器大相径庭。父元素及其兄弟元素position:relative，他们的子元素是position:absolute，也许你设置了某个子元素的z-index为页面中最高的值，IE6下这个元素可能还是会被其他元素覆盖。这是因为IE6是拼爹的，儿子再牛逼，老子不给力也不行。

测试代码：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>z-index bug</title>
<style>
*{ margin:0; padding:0;}
#dad1{ top:-50px; width:100px; height:100px; background-color:red; text-align:right;}
#son1{ left:0px; top:0px; width:50px; height:50px; background-color:green;}
#dad2{ top:30px; width:200px; height:50px; background-color:yellow; text-align:right}
</style>
</head>
<body>
 
<divstyle="position:relative; z-index:99;" id="dad2">爸爸2</div>
<divstyle="position:relative;"id="dad1">爸爸1
    <divstyle="position:absolute; z-index:9999;" id="son1">儿子1</div>
</div>
 
</body>
</html>

IE6中：其他浏览器：

此例中儿子1的z-index值很高，但它老爸没有z-index，弱爆了，因此在IE6下儿子1被爸爸2覆盖。所以，给爸爸1加上z-index：99或更大的数字，儿子1自然就能抛头露面了。

解决方法：
1、给出现问题的元素的父级加上较高的z-index。
2、若不能满足要求，将所有非position:static的元素都加上相应的z-index值即可。

 

六、IE6/7下li前的圆点等样式不显示

base.css里去除了列表的样式，但在某个具体的页面又需要加上，也许我们觉得这是小儿科，闭着眼睛就写上了：li{ list-style:disc}，搞定！

真搞定了么？测试一下，在现代浏览器中毫无问题，但在ie6/7下就不见了样式。

解决方法：
应该写完整：li{ list-style:disc inside}。

 

七、IE6不支持position:fixed

有时候想让底部导航条或者回到顶部的按钮钉在浏览器窗口的底部，自然我们会想到使用position:fixed，然后bottom:xxpx;z-index:xxx就搞定了。但ie6不支持fixed这个东西，咋办？

解决方法：
1、若页面上只有需要fixed定位、没有relative和absolute定位的元素，设置html{overflow:hidden}和body{height:100%;overflow:auto}即可。
2、css表达式解决：

1
2
3
4
5
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top/* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right/* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom/* IE6 底部固定  */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left/* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

3、js解决。ie6下使用相对定位，然后滚动时动态计算改变top值即可。

 

八、IE6下更换img图片的src属性显示空白

这个bug在img外层包裹有a标签，而且a标签的href属性为javascript:;或者javascript:void(0)或者#等阻止页面跳转的语句时触发。

测试代码：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<script>
function changeSrc(){
    var img = document.getElementsByTagName("img")[0];
    img.src = "http://cued.xunlei.com/demos/publ/img/P_001.jpg";
}
</script>
</head>
<body>
<aonclick="changeSrc()"href="javascript:;"><imgsrc="http://cued.xunlei.com/demos/publ/img/P_000.jpg"></a>
</body>
</html>

ie6下，点击了图片之后，图片地址改变图片并未显示。手动右击，显示图片，却可以加载出来。这是因为 “这样使用a标签的话并不能阻止a标签最后触发一个什么行为，导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被阻止了”。

解决方法：
1、将外层包裹的a标签换成其他标签，例如<span>。
2、当解决方法1失效时（我就遇到这种问题，项目中实际情况比这复杂得多，方法1失效），采用setTimeout解决。即将例中的changeSrc函数延迟触发，延迟1ms即可。

 

九、IE6、7下右浮动bug

差点忘了这个有趣的bug。

测试代码：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>右浮动bug</title>
<style>
p{width:200px; height:24px; line-height:24px; border:1px solid #ccc;}
.fr{float:right;}
</style>
</head>
<body>
    <p>
        左边文字
        <spanclass="fr">右浮动文字</span>
    </p>
</body>
</html>

同一行有两个元素，右边的元素右浮动后，在IE6\7下会跑到下一行。像这样：

QQ截图20130514110331

解决方法：
1、很简单，将右浮动元素写到前面即可，<p><span class="fl">右浮动文字</span>左边文字</p>。此法屡试不爽，以后写html的时候直接这么写就行了。
2、把左边文字也用容器包裹起来，使之左浮动，然后父级overflow:hidden或者清理浮动。

 

十、IE6下a标签内元素hover的bug

测试代码：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>IE6下的hover引发的bug</title>
<style>
    a{color:#333;}
    a:hover span{color: red;}
</style>
</head>
<body>
    <ahref="#">IE6下 <span>(hover时我应该变色)</span> 。</a>
</body>
</html>

在IE6下，鼠标移上去，发现文字没有变色。这是由于hover时我们改变的是链接内部元素的样式，而链接的样式没有改变，IE6根本不触发hover效果。

解决方法：
1、让链接的样式也改变，加上一些无关紧要的样式即可，比如a:hover{padding:0px;}。
2、用js模拟span元素的hover效果。

 

十一、IE6下使用form.submit()提交表单的bug

有时我们需要使用a标签触发表单提交事件，但可能会发现，ie6下，点击提交无任何反应。

测试代码

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>form.submit</title>
</head>
<body>
<formaction=""method="get">
    <inputtype="text"name="name"value="jacky">
    <ahref="javascript:;"onclick="smt();">提交</a>
</form>
<script>
function smt(){
    var form = document.getElementsByTagName('form')[0];
    form.submit();
}
</script>
</body>
</html>

IE6下，根本不执行form.submit()操作。懒得在这孙子上面浪费时间去找原因了，直接上解决方案：

解决方法：
1、常见的解决方法，延时触发。给form.submit()包上一层，setTimeout(function(){  form.submit();  },1)即可。
2、使用return false。例：onclick="smt(); return false"。注意：不能写到smt函数里面了，那样无效。
3、去掉a标签的href属性，直接使用style="cursor:pointer"来使链接产生手型。

 

十二、IE6\7下overflow溢出的bug

当父级元素设定了高宽以及overflow（hidden或者scroll或者auto），子元素使用position:relative相对定位时，IE6\7会发生溢出，overflow设置失效。

测试代码

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>ie6/7 overflow溢出bug</title>
<style>
*{ margin:0px; padding:0px;}
div{ margin:20px; border:1px solid #333; width:100px; height:100px; overflow:auto;}
p{ position:relative;}
</style>
</head>
<body>
<div>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
</div>
</body>
</html>

如图，IE6、7下溢出了！

QQ截图20130821204617

解决方法：
1、将父级（例中div）也给一个position:relative。

 

十三、IE6\7下padding-top复制到padding-bottom上

这个问题是和clear清除浮动相关的。当父元素设置了padding-top值，子元素浮动并且使用clear清除浮动时，产生此问题。
测试代码

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPEhtml>
        <html>
        <head>
        <metacharset="utf-8">
        <title></title>
        <style>
        *{ margin:0; padding:0;}
        .wrap{ background:#ccc; padding-top:20px;}
        span{ background:#f00; float:left;}
        .clear{ height:0px; font-size:0; clear:both;}
        </style>
        </head>
        <body>
        <divclass="wrap">
         <span>浮动1</span>
         <span>浮动2</span>
         <divclass="clear"></div>
        </div>
        </body>
        </html>

如图，IE6\7下，多出了padding-bottom，高度和padding-top一样。
QQ截图20131224124307

解决方法：
1、给父元素固定的width和height，或者给它display:inline-block。
2、使用overflow:hidden或者:after伪元素清除浮动。
3、牛逼的*zoom:1登场！当当当当~~

 

本文为jacky原创，转载请注明出处！

本文固定链接: http://www.jackyrao.com/archives/94 | Jacky的博客

阅读全文
0 0
淘宝虚拟宝贝的类目 淘宝虚拟宝贝的类目
原创粉丝点击
热门IT博客
无线密码破解软件无线密码破解软件
mysql字段值加一mysql字段值加一
2017年编程语言排行榜
北京优化
智慧树网络课平台登录
如何破解app软件
免费谈恋爱软件
淘宝男士防晒衣
悉尼大学商学院 知乎
商务拓展bd面试知乎
兼职淘宝客服好不好做
如何解决网络劫持
windows安装redis步骤
淘宝全屏海报怎么设置
java类与对象
windows xp企业版下载
法律 知乎
qq会员免费开通软件
php7性能会赶上java吗
淘宝透明图怎么做的
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 何阳律师被撞 湖南何阳律师被杀 何雨 何雨柱 何静 何静雯 演员何静 何静与宿管冯老头 白叟公园何静和山炳 何静老人公园 何静和门卫老冯 李大爷与何静全文 宿管冯大爷与何静 何音 何音个人资料 演员何音个人简历 何音现在的丈夫 何马作品 何马 惊天奇案 何马 藏地密码 何马 何鸿 何鹏 谁dj何鹏 何鹏dj 谁何鹏dj版 何鹏资料 听心dj何鹏 dj何鹏版 谁dj何鹏版 谁雪十郎何鹏版dj免费下载 谁雪十郎何鹏版dj下载 雪十郎谁dj何鹏 爱情主演dj何鹏 情火dj何鹏版 野花香dj何鹏版简谱 谁何鹏版歌词 dj何鹏个人资料 雪十郎谁dj何鹏在线下载地址 张冬玲dj何鹏版歌曲 听心杭娇dj何鹏版免费下载

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里