IE6下position:absolute的定位BUG(转载)
来源:互联网 发布:淘宝店铺全屏轮播图 编辑:程序博客网 时间:2024/05/21 06:54
2011年02月23日 星期三 下午 4:20
position:absolute定位在IE6下存在left和bottom的定位错误问题: <!--IE6下的left定位错误-->
<div style="position:relative;border:1px solid orange;text-align:center;">
<a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>
<!--IE6下的left定位错误-->
<hr />
<div style="position:relative;border:1px solid orange;text-align:right;">
<a href="http://hi./baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>
上面这段代码在IE6中定位错误。解决办法有两种:1、给父层设置zoom:1触发layout。 2、给父层设置宽度(width)。 <!--解决方法1 zoom:1--><div style="position:relative;border:1px solid orange;text-align:center;">
<a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>
<!--IE6下的left定位错误-->
<hr />
<div style="position:relative;border:1px solid orange;text-align:right;">
<a href="http://hi./baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>
<hr />
<div style="position:relative;border:1px solid orange;zoom:1;text-align:center;">
<a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div>
<!--解决方法2 设置width-->
<hr />
<div style="position:relative;width:99%;border:1px solid orange;text-align:center;">
<a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;top:0;left:0;background:#CCC;">cjky</div>
</div> 下面的这段代码在IE6下,bottom定位错误: <!--IE6下的bottom定位错误-->
<hr />
<div style="position:relative;border:1px solid orange;text-align:center;">
a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">cjky</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://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<br />
<a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">cjky</div>
</div>
<!--解决方法2 设置height-->
<hr />
<div style="position:relative;height:60px;border:1px solid orange;text-align:center;">
<a href="http://hi.baidu.com/cjky/" title="小老头的blog">小老头</a>
<div style="position:absolute;bottom:0;left:0;background:#CCC;">cjky</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外的任何值
- IE6下position:absolute的定位BUG(转载)
- IE6下position:absolute的定位BUG
- IE6、IE7下绝对定位position:absolute和margin的冲突bug解决方法
- IE6下相对定位中的绝对定位不显示的解决方案 position absolute
- IE6/7下绝对定位(position:absolute)元素消失
- ie6下position:absolute绝对定位内容不显示
- IE6下与float元素相邻的position:absolute元素消失BUG
- IE6下position:absolute相邻元素margin-top失效的bug
- ie6的position:absolute与height:100% bug
- IE下当a标签使用position:absolute绝对定位时没有点击区域的bug
- IE6下position:fixed的bug解决
- 【IE6 BUG大全】position:fixed在IE6下的实现
- 解决ie6下position:absolute不兼容问题
- IE6/IE7下position:absolute;绝对定位偏移、不显示问题
- ie6使用绝对定位position:absolute,box不显示
- ie6使用绝对定位position:absolute,box不显示
- IE6下position:fiexd的BUG处理方法
- 解决IE6 下 position:fixed 绝对定位的问题
- Oracle 11G Client 客户端配制客户端监听和网络服务名(图文详解)
- Oracle 10g 正则表达式
- WCF学习笔记(1)最简单的例子
- 分析百映社区的创建缘由
- Differences between System V and Posix semaphores
- IE6下position:absolute的定位BUG(转载)
- ext datefield 中文问题
- operator =
- statspack安装使用 和 report 分析
- Oracle Rman跨resetlogs版本恢复
- android 加载图片方式
- 地方门户网站发展与SEO优化瓶颈之谈
- 关于Java 23种设计模式的有趣见解
- 黑马程序员--学习笔记--一个WinForm简单加法练习程序