- ·上一篇文章:详谈CSS网页布局中容易发生的错误编码
- ·下一篇文章:divcss布局及Web标准对网站优化和SEO方面的益处
当前位置:K88软件开发 → 文章中心 → 编程语言 → Css/Css3 → Css/Css301 → 文章内容
IE6绝对定位的bug及其解决办法
IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题:
上面这段代码在IE6中定位错误。
解决办法有两种:
1、给父层设置zoom:1触发layout。 
2、给父层设置宽度(width)。
下面的这段代码在IE6下,bottom定位错误:
解决办法和left定位类似:
方法1是给父层设置zoom触发layout。
方法2是给父层设置高度(height)。
IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout: 
 
 
 
 
 
 
 
position:absolute 
绝对定位元素的包含区块(containing 
block)就会经常在这一方面出问题
float:left|right 
由于layout元素的特性,浮动模型会有很多怪异的表现
display:inline-block 
当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
width: 
除auto外的任何值
height: 
除auto外的任何值
zoom: 
除auto外的任何值
<
!–IE6下的left定位错误–>
<
div 
style=”position:relative
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
<
!–IE6下的left定位错误–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
text-align:right
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
!–IE6下的left定位错误–>
<
div 
style=”position:relative
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
<
!–IE6下的left定位错误–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
text-align:right
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
上面这段代码在IE6中定位错误。
解决办法有两种:
1、给父层设置zoom:1触发layout。 
2、给父层设置宽度(width)。
 
<
!–解决方法1 
zoom:1–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
zoom:1
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
<
!–解决方法2 
设置width–>
<
hr 
/>
<
div 
style=”position:relative
width:99%
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
!–解决方法1 
zoom:1–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
zoom:1
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
<
!–解决方法2 
设置width–>
<
hr 
/>
<
div 
style=”position:relative
width:99%
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
top:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
下面的这段代码在IE6下,bottom定位错误:
<
!–IE6下的bottom定位错误–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
bottom:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
!–IE6下的bottom定位错误–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
bottom:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
解决办法和left定位类似:
方法1是给父层设置zoom触发layout。
方法2是给父层设置高度(height)。
<
!–解决方法1 
zoom:1–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
zoom:1
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
br 
/>
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
bottom:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
<
!–解决方法2 
设置height–>
<
hr 
/>
<
div 
style=”position:relative
height:60px
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
bottom:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
!–解决方法1 
zoom:1–>
<
hr 
/>
<
div 
style=”position:relative
border:1px 
solid 
orange
zoom:1
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
br 
/>
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
bottom:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
<
!–解决方法2 
设置height–>
<
hr 
/>
<
div 
style=”position:relative
height:60px
border:1px 
solid 
orange
text-align:center
”>
 
 
 
 
 
<
a 
href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
div 
style=”position:absolute
bottom:0
left:0
background:
#CCC
”>
52CSS<
/div>
<
/div>
IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout: 
 
 
 
 
 
 
 
position:absolute 
绝对定位元素的包含区块(containing 
block)就会经常在这一方面出问题
float:left|right 
由于layout元素的特性,浮动模型会有很多怪异的表现
display:inline-block 
当一个内联级别的元素需要layout的时候就往往符用到它,这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
width: 
除auto外的任何值
height: 
除auto外的任何值
zoom: 
除auto外的任何值
IE6绝对定位的bug及其解决办法