IE layout 探讨

yiminghe

浏览: 1460319 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

xhtml / css

IE EXT Firefox Opera JavaScript

今天的一个奇怪的事以及分析Ext.util.TextMetrics有发现。探讨一下：当 div 为绝对定位或者浮动的情况下（并且不设置宽度），div 会恰好收缩包含它的子节点。但是 ie 系列当该 div 下的子节点有 layout （ On having layout ）时，情况就不同了，该具有 layout 的子节点会自动扩展其宽度，并导致包含其的父节点div的所有子节点都扩展宽度至浏览器大小。

如下面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>宽度 测试</title>
<script type="text/javascript">
//<![CDATA[
window.onload=(function() {
 alert('test width :'+document.getElementById('test').offsetWidth);
 alert('test2 width :'+document.getElementById('test2').offsetWidth);
});
//]]>
</script>
</head>
<body>
<div id='test' style='border:1px solid green;position:absolute;top:100px;left:0px;height:100px;'>
  <div style='float:right;'>
		父节点绝对定位 ： 子节点浮到右边了
  </div>
  <span>另一个子节点原地不动 </span>
</div>

<script type='text/javascript'>
	alert('为什么不加alert,ie下绝对定位的元素会显示不出来呢');
</script>

<div id='test2' style='border:1px solid green;float:right'>
	
	<div style='zoom:1;'>
		父节点浮动处理 ： 子节点 在 ie 中有了 layout
  </div>
  
	<span>另一个子节点原地不动 </span>
</div>
</body>
</html>

正常情况下：

test test2 应该紧紧包含其子节点，而不应该扩展到浏览器的宽度，这正是 firefox , opera 的表现，而 ie 系列就差强人意了。

各个浏览器的测试效果图：

IE 6 结果最不如人意：

IE 7 一个div 合格了：

ie8 刷新前后竟然还不一样，难道 ie8 bug ( dtd 的作用- ie8 bug )：

Firefox , opera 应该都是符合标准的：

msdn 官方解释：

HasLayout Overview ：There are also auto-sizing side effects: an element with layout cannot "shrink to fit" its children, so for example an absolute positioned box around an element with layout does not shrink to fit the layout element's children.

要解决这个问题：只能是在父节点 div 上显示设置宽度，这也是 Ext.util.TextMetrics 的作用，读出子节点文字应有的宽度，再重置给父节点。（Ext.util.TextMetrics 近日待具体解析）

综上所述：IE 下 Layout ( On having layout ) 真的很重要，要重点理解。