[求助] 关于绝对定位元素的宽度100%怎么解释，IE6 vs FF3.5 [复制链接]

帖子: 753
体力: 4601
威望: 3

发表于 2009-9-9 02:47:07 |显示全部楼层

先放上代码，和截图
一个父层，一个子层绝对定位，子层使用百分比定义高宽，父层有padding

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

问题是
1、IE6下和FF下显示有区别，怎么解释？又怎么办才能让它们一致？
2、从图上看：子层的高和宽是100%，但从子层实际高和宽的取值效果上看是：父width+父padding，这似乎与非绝对定位时100%的含义有出入，标准就是这样规定的吗？貌似IE的行为是要走“双重标准”

（图中左为FF3.5，右为IE6）

[ 本帖最后由 xjj2000 于 2009-9-9 02:49 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

此人来自月球

西部数码顶级域名注册商39元抢注！

ONEBOYS　

步舞之鹤

帖子: 1856
体力: 4355
威望: 16
居住地: 浙江省杭州市

发表于 2009-9-9 10:23:50 |显示全部楼层

绝对定位相对父级的100%设置，受父级padding的影响，在ie6,7,8下都不一样啊。

子级的100%是相对于父width/height+父padding —— 对于非绝对定位来说，是正确的。
对于绝对定位，FF和ie8也是如此解释的。应该也是正确的。

ie6和ie7有点怪，一个是height按这个解释的，一个是width按这个解释的。

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

xjj2000　楼主

蓝色月球

帖子: 753
体力: 4601
威望: 3

发表于 2009-9-9 10:36:10 |显示全部楼层

恩，再补充一点，从图上看，绝对定位的参考点是：（0，0）位于父的左上角boder的内角（也就是说，该点不考虑含父的padding）；（left,top）参考点是子的盒子的最左上角（是考虑了子的margin的）

麻烦楼上的兄弟用IE8测一下是不是一致，或者其他浏览器下

此人来自月球

ONEBOYS　

步舞之鹤

帖子: 1856
体力: 4355
威望: 16
居住地: 浙江省杭州市

发表于 2009-9-9 11:12:54 |显示全部楼层

绝对定位（0，0）的参考点是父层border的内角。

不明白你后面说的（left,top）参考点,指的是什么（相对定位？）。

不过，有一点需要明确。
{position:absolute;}
没有写明{left:X;top:Y;}不表示默认为{left:0;top:0;}
没写left,top在ie和ff下会有不同的（这点，在LZ这里应该没有表现）

xjj2000　楼主

蓝色月球

帖子: 753
体力: 4601
威望: 3

发表于 2009-9-9 13:25:29 |显示全部楼层

（0,0）我指的是绝对定位时参考的坐标原点（起始点）
（left,top）我指的是在绝对定位的子层上设置的定位属性： left和top的值，它在子层上的位置（参考点）就是子层的盒子的最左上角
不知道我现在说明白了没

此人来自月球

ONEBOYS　

步舞之鹤

帖子: 1856
体力: 4355
威望: 16
居住地: 浙江省杭州市

发表于 2009-9-9 13:40:38 |显示全部楼层

回复 5# xjj2000 [楼主] 的帖子

明白

对，它的参考点是整个盒子模型的左上角，包含margin所占的空间。

xjj2000　楼主

蓝色月球

帖子: 753
体力: 4601
威望: 3

发表于 2009-9-9 14:02:10 |显示全部楼层

恩，看来IE6还是要hack了？郁闷。。。

此人来自月球

ONEBOYS　

步舞之鹤

帖子: 1856
体力: 4355
威望: 16
居住地: 浙江省杭州市

发表于 2009-9-9 14:43:23 |显示全部楼层

回复 7# xjj2000 [楼主] 的帖子

外层的padding非用不可吗？

xjj2000　楼主

蓝色月球

帖子: 753
体力: 4601
威望: 3

发表于 2009-9-9 15:44:13 |显示全部楼层

恩，只是引出了问题，如果实际做的话，能不用就不用了，呵呵，看来是父层padding的问题
我想，实际做的话，应该可以用些办法去绕过这个“bug”,效果能实现就行了

此人来自月球

licheepig　

初级会员

帖子: 41
体力: 139
威望: 0
居住地: 湖北省武汉市

发表于 2009-9-10 11:22:22 |显示全部楼层

哎呀，我都看糊涂了

xjj2000　楼主

蓝色月球

帖子: 753
体力: 4601
威望: 3

发表于 2009-9-11 12:17:14 |显示全部楼层

折腾了半天，又发现个问题，所以补充上来大家一起讨论
看了一些资料上，一般都说是将width为百分比值的定义为“相对于上级元素的宽度....”
然而没有查到在有“绝对定位”的子层上是怎么解释的。
经过实验，FF3.5的解释是，绝对定位的子层使用百分比width时所使用的参照物是最近的使用了position动态定位的祖先元素。而不是简单的参照“直接父级（上级）”的宽度。
相反，IE6下无论如何参照的都是“直接父级”的宽度
现把代码和图贴出来：图中FF3.5在左，IE6在右。
因为没有找到明确的定义，所以也不知道到底谁的渲染是正确的

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

蓝色的是爷爷层：position:relative
黑色的是父亲层：没有定位
红色的是儿子层：position:absolute; width:100%; height:100%; top:20px; left:20px;
大家也帮忙看看其他浏览器是怎么解释的

[ 本帖最后由 xjj2000 于 2009-9-11 12:46 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

此人来自月球