前端名博

前端名博

【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG(2010年3月30日更新)

在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8及firefox、chrome等不一致。

在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。

未标题-1

目前解决办法,使用csshack,_left针对ie6进行重设。

另:IE6 BUG大全: http://www.css88.com/archives/579

===========================以下内容2010年3月30日更新=============================

今天收到robertsky123的留言(见留言区):

一些样例请测试好再传,会误导读者的,还有ie与其他主流浏览器的盒模式是一样的,不是ie定了width在加padding就不会改变宽度也是改变的, 网上有些东西很容易误导读者,请博主对读者负责啊!

非常感谢robertsky123的留言和建议!由于robertsky123当头棒喝使我重新对该问题进行了测试。

确实该问题还有其他的解决:不过这些方案很和实际项目有关,比如这个父级容器是否顶宽定高等其他原因。

首先看问题的产生,HTML和CSS如下:


<div style="position:relative; padding:20px; border:2px solid #F00;">

<div style="position:absolute; top:0; left:0; border:1px solid #690;">test box</div>

</div>

显示如图:

Read More »

Javascript森林期待您的加入

关于我们
javascript森林(http://www.9demo.com/)诞生于2009年7月1日,致力于javascript在前端开发中的应用,是js爱好者自发组建的技术分享小站,依托javascript森林群(群号:7617538),
进行JS的技术交流,并把精华分享在http://www.9demo.com/上。
但,远远不止这些……
我们为了共同的爱好走到一起,在这里,我们时而为几行代码唇枪舌剑,时而为丁点惊喜手舞足蹈,时而为某种遗憾扼腕叹息…..
我们坚信while(!success){way++;effort++;try++;}
我们来自全国各地,在js森林里却像是坐在一个屋里的一家人
进入javascript森林,就进入了一个javascript世界
我们期望在将来的的某一天,javascript森林里的成员都成为IT领域的精英.
$(’javascript森林>成员’).addclass(’come on!’)

 

javascript森林群号:7617538

javascript森林群博客:http://www.9demo.com/