IE layout 探讨-优快云博客

本文探讨了IE浏览器中div元素及其子元素在设置了特定样式后出现的宽度异常扩展现象，尤其是在应用了layout的情况下。通过对比不同浏览器的行为，揭示了IE在处理浮动和绝对定位元素时的独特表现，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天的一个奇怪的事以及分析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.οnlοad=(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 ) 真的很重要，要重点理解。