在标准模式下，子级可以影响其父级的尺寸吗？
以这个页面为例，是否可以在mydiv中插入一个child，从而导致mydiv的高度增长超过500px？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div id="mydiv" style="width:500px;height:500px;border:4px solid red">
<!-- place content here -->
</div>
</body>
</html>
我找不到任何可以的东西。例如，下面的这种情况我已经告诉innerDiv高度为100%。它会发现它的父级高度是 500px，因此也是 500px 高。最终结果是内容的高度为 800 像素，并且内容超出了 mydiv，而 mydiv 的高度仍然是 500 像素：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div id="mydiv" style="width:500px;height:500px;border:4px solid red">
<img src="myimage.jpg" width="400" height="300" />
<div style="width:100%;height:100%;background:yellow">
hi
</div>
</div>
</body>
</html>
IE 在怪异模式下运行将导致 mydiv 在许多情况下增长以适应其子级。看来标准模式显然不会增长。总是这样吗？
我主要在 Windows 上的 IE8 和 FF3.5 中对此进行测试，其中 IE8 在所有可能的模式下运行。
Take this page for example, is it possible to insert a child into mydiv such that it will cause mydiv's height to grow beyond 500px?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div id="mydiv" style="width:500px;height:500px;border:4px solid red">
<!-- place content here -->
</div>
</body>
</html>
I can not find anything that will. For example, this situation below I have told innerDiv to be 100% in height. It will find out its parent is 500px tall, and thus also be 500px tall. The net result is the content is 800px tall, and the content spills out beyond mydiv, with mydiv still a staunch 500px tall:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div id="mydiv" style="width:500px;height:500px;border:4px solid red">
<img src="myimage.jpg" width="400" height="300" />
<div style="width:100%;height:100%;background:yellow">
hi
</div>
</div>
</body>
</html>
IE running in quirks mode will cause mydiv to grow to accomodate its children in many situations. It seems standards mode will explicitly not grow. Is that always the case?
I am testing this out primarily in IE8 and FF3.5 on Windows, with IE8 running in all its possible modes.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
否：在标准模式下，容器的默认
overflow属性应设置为visible，这意味着溢出的内容将呈现在容器的剪切区域之外。没有这样的overflow选项来增加容器的大小以匹配其子容器。您可以在此处查看有关溢出的更多信息，但是有一些方法可以增大容器以匹配其大小儿童尺寸。在标准模式下，正确的方法是设置 CSS 属性
min-height而不是属性height。由于 IE6 中不会发生强制高度行为，因此人们通常最终会为符合标准的浏览器设置
min-height，然后设置heightcode> 仅适用于 IE，带有 条件注释 或通过在属性名称前添加下划线_前缀，这样 IE6 就会使用它，但其他浏览器会忽略它。所以你的 div 会是这样的
你可以在
min-height上找到更多信息 此处并通过 Google/Bing 快速搜索min-height IE6将为您提供所需的所有答案。No: in standards mode, the default
overflowproperty of a container should be set tovisiblemeaning that overflowing content will be rendered outside the container's clipping area. There's no suchoverflowoption as to grow the container's size to match its children. You can see more on overflow hereHowever there are methods of growing the container to match its children's size. In standards mode, the correct way of doing that is setting the CSS property
min-heightinstead of the propertyheight.Since the height enforcing behavior doesn't happen in IE6, people usually end up setting both
min-heightfor standards-compliant browsers and then either setheightfor IE only with conditional comments or by prefixing the property name with an underscore_so IE6 will use it but other browsers will ignore it.So your div would be something like
You can find more info on
min-heighthere and a quick Google/Bing search formin-height IE6will give you all the answers you need.