建站资讯

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





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


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

 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]



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





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


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

 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]



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


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

 

div css xhtml xml Example Source Code 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
IE6绝对定位的bug及其解决办法
!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 /
长按图片保存/分享

上一篇 : 相对定位和绝对定位

下一篇 : CSS代码优化全攻略

深圳网站设计公司

启邦互动作为深圳专业的建网站公司,专注于为客户量身定制高品质的网站。我们拥有丰富的经验和专业知识,注重细节,追求完美,确保每个项目都能够顺利交付并得到客户的满意认可。选择启邦互动,您将获得专业的网站建设开发服务,为您的业务发展提供有力支持。

联系方式

深圳市龙岗区吉华街道水径综合楼6c-1

Call us : + 137 2425 9054

Email us : service@sz-qibang.com

在线咨询

您好,请点击在线客服进行在线沟通!

联系方式
热线电话
17727976231
上班时间
周一到周五
E-mail地址
service@sz-qibang.com
扫一扫二维码
二维码
扫码咨询
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了