是否有替代 IE 填充不会使文本消失的替代方法？答案

【问题标题】：Is there an alternative to padding for IE that doesn't make the text disappear?是否有替代 IE 填充不会使文本消失的替代方法？
【发布时间】：2010-10-21 03:28:18
【问题描述】：

是否有一个干净的替代方案不会使以下文本消失：

<div style="background-color:#ddd; padding:10px 0 50px 0;">
<ol><li>In what year were you born?</li></ol>
<div><select name="c_record" size="1">
    <option value="">-- Select One --</option>
    <option value="1">1900</option>
    <option value="2">1902</option>
</select></div>
</div>

如果我将外部 div 上的填充更改为：padding:10px 0 0 0;，文本会再次显示。

我还尝试在最外面的 div 中添加第二个 div 并向其添加填充，但这也不起作用。给这个内部 div 添加边距对顶部和底部边距没有任何影响。

有什么想法吗？

编辑：我使用的是 IE 6 和 7，页面上没有其他代码，没有文档类型，样式表——只有上面的代码。

【问题讨论】：

我把上面的代码复制到了一个html文件中，我的IE7没有出现这个问题。您是否使用其他版本，例如 IE6 或 8？
当使用 IE7 且未指定 doctype 时，IE 假定它必须使用与 IE6 兼容的渲染器。

标签： css internet-explorer

【解决方案1】：

我使用的是 IE 6 和 7，但我没有页面上的其他代码，没有文档类型，样式表——就是上面的代码。

试图通过让 IE 默认为 quirks 模式来解决问题是愚蠢的。

无论如何，@Jeremy B 有一个很好的解决方案，高度为：1%。这在 IE6 中对我来说很好用：

<div style="background-color:#ddd; padding:10px 0 50px 0; height: 1%;">

【讨论】：

在包含 HTML 其余部分的页面上，它也无法正常工作，也没有在怪癖模式下运行。这纯粹是为了测试它是否是其他东西，或者只是简单的 IE 工作方式。
那么“高度：1%”或其他“haslayout”触发器是否在您的页面中起作用？或者在你上面的例子中？

【解决方案2】：

添加位置：相对；你的风格将解决这个问题。它被亲切地称为 Peekaboo bug。

Here 是一个更详细地解释它的链接。

我同意您应该尝试使用边距，因为添加 position:relative 可能会导致其他问题。此外，浏览器也不会始终遵循带有填充的盒子模型标准。

【讨论】：

不幸的是，填充和边距要么破坏它，要么在没有填充的另一个 div 中不起作用。亲戚修复了它，对于它所在的页面，没有其他东西是浮动的，所以我们应该很好......直到我决定浮动一些东西。
如果你浮动一些东西，你总是可以使用 height: 1% 来提供相同的修复。

【解决方案3】：

只有这些样式吗？如果有任何漂浮的东西，事情会很快变得复杂。请在它自己的文件中尝试此操作，仅包含 doctype、html、head 等。以上内容没有任何问题，单独进行。

【讨论】：

我已经删除了页面上的所有其他内容，所以只有这个，没有其他样式表，文档类型，什么都没有......只有这个。

【解决方案4】：

试试边距而不是内边距？

【讨论】：

边距不起作用，因为我需要显示背景。
你仍然可以使用边距并在其下方放置一个 div 来保存背景。
试过了，但它导致了同样的问题（更新了问题）。