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

2011-11-08 01:10:48

浏览：

“ !IE6下的left定位错误 divstyle=position:relative;border:1pxsolidorange;text-align:center; ahref=http://www.52css.comhttp://www.52css.com//a divstyle=position:absolute;top:0;left:0;background:#CCC;52CSS/div / ”

http://www.52css.com/
52CSS

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

Example Source Code [www.52css.com]

http://www.52css.com/
52CSS

　　下面的这段代码在IE6下，bottom定位错误：

Example Source Code [www.52css.com]

http://www.52css.com/
52CSS

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

Example Source Code [www.52css.com]

http://www.52css.com/
http://www.52css.com/
52CSS

http://www.52css.com/
52CSS

　　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外的任何值

作者： admin