IE6中关于填充的破盒模型的最佳解决方法？答案

【问题标题】：Best work around for the broken box model in IE6 w/ respect to padding?IE6中关于填充的破盒模型的最佳解决方法？
【发布时间】：2009-02-03 22:55:36
【问题描述】：

我注意到，当内部元素具有 padding-bottom 时，IE6 和 IE7 都会将父 div 向下推……最好的解决方法是什么？是否可以使用有效的 css 解决此问题？

编辑

我使用的解决方案是在子元素中设置 overflow: auto （如下面接受的答案中所述）。我采用这种方法是因为我的子元素高度是动态的，因此我无法设置它。

【问题讨论】：

【解决方案1】：

padding-bottom 添加到子元素总高度，所以即使子元素为空，padding-bottom:10px;将给它10px的总高度。在所有现代浏览器中，父元素将扩展以为其子元素提供空间。

但是如果您希望在父级上设置高度，您可以在父级上设置一个高度并通过溢出来控制子级的内容：自动/隐藏/滚动..

或者你可以将 parent 设置为 position:relative;并设置位置：绝对；到子元素。

有点取决于你想要什么..

【讨论】：

【解决方案2】：

检查您设置的文档类型并且没有遇到quirksmode，接下来使用reset stylesheet 以确保您的所有元素都从同一脚开始。

如果您仍然在某个版本的 IE 中获得额外的填充，请使用 conditional comment 为该浏览器添加额外的样式表。

【讨论】：

【解决方案3】：

当填充应用于子元素时，我没有看到 IE8 或 Firefox“将父级向下推”；只是父元素的高度扩展以容纳子元素。这是 CSS 中正确的自动行为。我做了一个简短的演示：

请随意在 IE6/IE7 中尝试，看看会发生什么（需要启用 Javascript 才能使链接正常工作，但即使没有它，您也可以看到发生了什么）。

如果要限制父级的高度，则设置它（例如高度：100px）并将其溢出属性设置为隐藏。

【讨论】：