|
IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题： <!–IE6下的left定位错误–> <div style=”position:relative;border:1px solid orange;text-align:center;”> <a href=”http://www.jzxue.com”>http://www.jzxue.com/</a> <div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div> </div> <!–IE6下的left定位错误–> <hr /> <div style=”position:relative;border:1px solid orange;text-align:right;”> <a href=”http://www.jzxue.com”>http://www.jzxue.com/</a> <div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div> </div> 上面这段代码在IE6中定位错误。 解决办法有两种： 1、给父层设置zoom:1触发layout。 2、给父层设置宽度（width）。 div css xhtml xml Example Source Code Example Source Code [www.jzxue.com] <!–解决方法1 zoom:1–> <hr /> <div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”> <a href=”http://www.jzxue.com”>http://www.jzxue.com/</a> <div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div> </div> <!–解决方法2 设置width–> <hr /> <div style=”position:relative;width:99%;border:1px solid orange;text-align:center;”> <a href=”http://www.jzxue.com”>http://www.jzxue.com/</a> <div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div> </div> 下面的这段代码在IE6下，bottom定位错误： div css xhtml xml Example Source Code Example Source Code [www.jzxue.com] <!–IE6下的bottom定位错误–> <hr /> <div style=”position:relative;border:1px solid orange;text-align:center;”> <a href=”http://www.jzxue.com”>http://www.jzxue.com/</a> <div style=”position:absolute;bottom:0;left:0;background:#CCC;”>jzxue.com</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.jzxue.com”>http://www.jzxue.com/</a><br /> <a href=”http://www.jzxue.com”>http://www.jzxue.com/</a> <div style=”position:absolute;bottom:0;left:0;background:#CCC;”>jzxue.com</div> </div> <!–解决方法2 设置height–> <hr /> <div style=”position:relative;height:60px;border:1px solid orange;text-align:center;”> <a href=”http://www.jzxue.com”>http://www.jzxue.com/</a> <div style=”position:absolute;bottom:0;left:0;background:#CCC;”>jzxue.com</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外的任何值 (责任编辑：admin) |