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

时间:2015-5-26 19:59:40   作者:互联网   来源:互联网转载   阅读:224   评论:0
内容摘要:  IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题:   Example Source Code []  <!–IE6下的left定位错误–><divstyle=”position:relative;border:1pxso...

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

  ________IE6绝对定位的bug及其解决办法 Example Source Code []

  <!–IE6下的left定位错误–>
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=””>;/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=””>;/a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>

  上面这段代码在IE6中定位错误。
  解决办法有两种:
  1、给父层设置zoom:1触发layout。 
  2、给父层设置宽度(width)。

  ________IE6绝对定位的bug及其解决办法 Example Source Code []

  <!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a href=””>;/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=””>;/a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>52CSS</div>
</div>

  下面的这段代码在IE6下,bottom定位错误:

  ________IE6绝对定位的bug及其解决办法 Example Source Code []

  <!–IE6下的bottom定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=””>;/a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>52CSS</div>
</div>

  解决办法和left定位类似:
  方法1是给父层设置zoom触发layout。
  方法2是给父层设置高度(height)。

  ________IE6绝对定位的bug及其解决办法 Example Source Code []

  <!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a href=””>;/a><br />
<a href=””>;/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=””>;/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外的任何值


标签:绝对 定位 及其 解决 办法 

免责申明:

站内素材文件均整理自互联网,仅供个人学习参考使用,请勿用于商业用途,如您喜欢请购买正版

站内资源除部分为本站原创外皆由网上搜集和整理,若无意中侵犯到您的权利,敬请告之(QQ:2390986128)敬请告之,我们将在48小时内删除。知识产权声明】【★下载说明★】

上一篇:没有了
下一篇: HTML-加速、再加速上
全站地图