原文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
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"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
>
<
div
class
=
"wrap"
>
<!-- 定宽, 有padding -->
<
div
class
=
"content"
>
<!-- position:relative; 不定宽 -->
我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字我是content区域内的文字
<
span
class
=
"left"
>左</
span
>
<!-- position:absolute -->
<
span
class
=
"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
|
function
resizeImg(img){
var
image=
new
Image();
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
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"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
>
<
div
style
=
"position:relative; z-index:99;"
id
=
"dad2"
>爸爸2</
div
>
<
div
style
=
"position:relative;"
id
=
"dad1"
>爸爸1
<
div
style
=
"position:absolute; z-index:9999;"
id
=
"son1"
>儿子1</
div
>
</
div
>
</
body
>
</
html
>
|
此例中儿子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
|
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"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
>
<
a
onclick
=
"changeSrc()"
href
=
"javascript:;"
><
img
src
=
"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
|
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"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
>
左边文字
<
span
class
=
"fr"
>右浮动文字</
span
>
</
p
>
</
body
>
</
html
>
|
同一行有两个元素,右边的元素右浮动后,在IE6\7下会跑到下一行。像这样:
解决方法:
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
|
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>IE6下的hover引发的bug</
title
>
<
style
>
a{color:#333;}
a:hover span{color: red;}
</
style
>
</
head
>
<
body
>
<
a
href
=
"#"
>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
|
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>form.submit</
title
>
</
head
>
<
body
>
<
form
action
=
""
method
=
"get"
>
<
input
type
=
"text"
name
=
"name"
value
=
"jacky"
>
<
a
href
=
"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。例:οnclick="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
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"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下溢出了!
解决方法:
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
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"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
>
<
div
class
=
"wrap"
>
<
span
>浮动1</
span
>
<
span
>浮动2</
span
>
<
div
class
=
"clear"
></
div
>
</
div
>
</
body
>
</
html
>
|
如图,IE6\7下,多出了padding-bottom,高度和padding-top一样。
解决方法:
1、给父元素固定的width和height,或者给它display:inline-block。
2、使用overflow:hidden或者:after伪元素清除浮动。
3、牛逼的*zoom:1登场!当当当当~~
本文为jacky原创,转载请注明出处!