Question

是否有一个干净的替代品，不会使文字在下面消失：

<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＆amp; 7，我在页面上没有其他代码，没有doctype，样式表 - 只是上面的代码。

Answer 1

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

Here是一个链接，可以更详细地解释它。

我同意您应该尝试使用保证金，因为添加位置：相对可能会导致其他问题。此外，浏览器不会始终遵循带有填充的框模型标准。

Answer 2

尝试使用边距而不是填充？

Answer 3

这些是唯一的款式吗？如果有任何浮动事情变得复杂很快。请在它自己的文件中尝试使用doctype，html，head等。上面没有任何问题，只是孤立无援。

Answer 4

我正在使用IE 6＆amp; 7，我没有页面上的其他代码，没有doctype，样式表 - 只是上面的代码。

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

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

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

是否有替代填充IE，不会使文本消失？

4 个答案: