当前位置:K88软件开发文章中心编程语言Css/Css3Css/Css301 → 文章内容

IE6绝对定位的bug及其解决办法

减小字体 增大字体 作者:打倒浪子     来源:asp编程网  发布时间:2018-12-30 8:50:18

IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题:
<
!–IE6下的left定位错误–>

<
div 
style=”position:relative
border:1px 
solid 
orange
text-align:center
”>

 
 
 
 
 
<

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
”>

 
 
 
 
 
<

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
”>

 
 
 
 
 
<

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
”>

 
 
 
 
 
<

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
”>

 
 
 
 
 
<

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
”>

 
 
 
 
 
<

href=”http://www.52css.com”>
http://www.52css.com/<
/a>
<
br 
/>

<

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
”>

 
 
 
 
 
<

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及其解决办法