文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置：首页 → 网页设计 → HTML/CSS  → IE6绝对定位的bug及其解决办法

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

时间：2011/5/25 14:47:13来源：飓风整理作者：不详我要评论(0)

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

Example Source Code [www.52css.com]

<!–IE6下的left定位错误–>
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a 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;”>
     <a 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）。

Example Source Code [www.52css.com]

<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a 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;”>
     <a 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定位错误：

Example Source Code [www.52css.com]

<!–IE6下的bottom定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a 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）。

Example Source Code [www.52css.com]

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

相关视频

    没有数据

相关阅读 容易被误解的overflow:hidden警惕！CSS样式表也能挂木马CSS教程:兼容ie6,ie7,ff的fixedlols9定位赛什么时候开始打 s9定位赛开始时间小天才电话手表关机后还能定位吗dnf傀儡女巫职业外观介绍 dnf傀儡女巫职业定位dnf剑鬼职业外观介绍 dnf剑鬼职业定位安卓怎么定位别人的手机位置

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法