IE下绝对定位的BUG

Bell — Fri, 31 Jul 2009 08:29:01 +0000

项目中经常会用到层的绝对定位,但在IE6,IE7中它的表现却与其他浏览器存在差异,姑且算是一个IE的BUG吧(IE8除外).

先来看看这个BUG的触发条件:

先建立一个简单的模型,一个有固定宽度水平居中的容器wrapper,一个绝对定位的层position-box;这里讨论的是position-box并未设置left,right,top,bottom等属性的情况下的效果,这时候position-box对象会遵从正常的HTML布局规则,在前一个对象之后立即被呈递.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:600px; height:300px; margin:0 auto; background:#FC3; overflow:hidden; } .position-box{ position:absolute; width:100px; height:100px; background:#6CF;} </style> </head> <body> <div class="position-box">1</div> <div class="wrapper"></div> </body> </html>

提示：你可以先修改部分代码再运行。

运行代码后可以看到效果:

IE6 & 7 (下文都以IE7为例)

FF,IE8,opera… (下文都以FF为例)

很明显的看出在IE6,7中position-box的定位是以wrapper容器的左顶点为起始点,而在FF中起始点是浏览器窗体的左顶点(或者说是以body顶点为起始点).

改变一下布局,让wrapper先于position-box载入,这时IE7中的效果就与FF中一致了(这也是与CSS文档中所描述的规则相符的,上面红字部分).

然后我们把position-box放入wrapper中再增加一个向左浮动的层sidebar,让sidebar后于position-box载入,并调整sidebar的浮动方向(float:left;float:right…)看看效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:600px; height:300px; margin:0 auto; background:#FC3; overflow:hidden; } .position-box{ position:absolute; width:100px; height:100px; background:#6CF;} .sidebar{ float:left; width:200px; height:300px; background:#d7d7d7;} </style> </head> <body> <div class="wrapper"> <div class="position-box">1</div> <div class="sidebar"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

结果FF下,position-box并没改变,但IE7下却受到sidebar浮动方向的影响,也就是说IE6,7的position属性会受到相邻容器布局的同时影响,而非FF等浏览器中只受前一个容器布局的影响,我想这就是IE6,7中呈现出的效果与FF等浏览器中不一致的原因.

那么如何消除这个BUG呢,因为IE6,7会受到上下相邻容器的同时影响,所以先得把情况简单化,就是让position-box最早载入,这样就只会被后面的容器所影响(而在FF中是不会受影响的)再就是就是增加一个宽度100%的容器,这样不管后面的容易怎样布局,position-box都只会被100%宽度所影响,从而将起始点定在该容器的左顶点,最终的效果就与FF等一致了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:600px; height:300px; margin:0 auto; background:#FC3; overflow:hidden; } .position-box{ position:absolute; width:100px; height:100px; background:#6CF;} .sidebar{ float:left; width:200px; height:300px; background:#d7d7d7;} .clear{ width:100%; height:0px; overflow:hidden;} </style> </head> <body> <div class="wrapper"> <div class="position-box">1</div> <div class="clear"></div> <div class="sidebar"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

用jQuery解决IE下是我们常用的控件,但在IE下却存在一个令人困扰的BUG,就是在定义了定义宽度的话,超出的部分将被截断…影响用户的正常浏览.(而在FF,webkis内核的浏览器里会被正确的解析,如图)

如何解决:
这里用到了jQuery(最近在学这个,^_^),看看代码:

思路是当的宽度设为auto,失去焦点时还原.

2个值得注意的地方:
1.因为是IE的BUG,所以用了
2.为了不破坏布局所以加了这一句:$(this).css({ position:”absolute” });

看看实际的效果: Demo

目前这还只是一个雏形,还需要优化,如果大家有什么好的建议欢迎留言

IInterest » IE bug

IE下绝对定位的BUG