为什么 Internet Explorer 8 中没有底部填充？答案

【问题标题】：Why there is no bottom padding in Internet Explorer 8?为什么 Internet Explorer 8 中没有底部填充？
【发布时间】：2011-08-13 20:37:53
【问题描述】：

为什么在以下代码中 Internet Explorer 8 中没有底部填充？

HTML：

<div id="wrapper">
    <div class="a">Hello</div>
    <div class="a">Stack</div>
    <div class="a">Overflow</div>
</div>

CSS：

#wrapper {
    border: 1px solid red;
    padding: 10px;
    height: 30px;
    overflow: auto;
}
.a {
    border: 1px solid black;
}

浏览器兼容性的任何解决方法？

【问题讨论】：

你使用重置样式表吗？
@Icid：不，我不想，我也不想。
你应该 ;p 真的很有用，并且不时解决丑陋的错误。尤其是这个：html5doctor.com/html-5-reset-stylesheet

标签： html css internet-explorer internet-explorer-8 padding

【解决方案1】：

浏览器对规范的解释？

'scroll' 的值会告诉 UA 支持可见滚动一种显示机制，以便用户可以访问剪辑的内容。

从字面上看，这意味着他们，浏览器，可以取悦自己，他们只需要提供对内容的访问，而不是填充或边框；）

兼容的解决方法：

#scroller {
    border: 1px solid red;
    height: 50px;
    overflow: auto;
}

.wrap {padding: 10px;}

.a {
    border: 1px solid black;
}

HTML：

<div id="scroller">
  <div class="wrap">
    <div class="a">Hello</div>
    <div class="a">Stack</div>
    <div class="a">Overflow</div>
  </div>
</div>

【讨论】：

LOL.. 也许是因为否则就没有挑战了？ ;)

【解决方案2】：

弄脏了怎么办？（哎呀，我是程序员，不是设计师哈哈）。

<style type="text/css">
#wrapper {
    border: 1px solid red;
    padding: 10px;
    height: 30px;
    overflow: auto;
}
.a {
    border: 1px solid black;
}
.b {
    display:none;
}
</style>

<!--[if IE 8]>
<style type="text/css">
.b {
    display:block;
    height: 10px;
}
</style>
<![endif]-->

还有：

<div id="wrapper">
    <div class="a">Hello</div>
    <div class="a">Stack</div>
    <div class="a">Overflow</div>
    <div class="b"></div>
</div>

:D

【讨论】：

对我来说太脏了。无法接受这种解决方案。
我的第一个想法甚至更脏。使用 JQuery :D。恐怖！

【解决方案3】：

阅读this 的帖子，我认为它对我有用

【讨论】：

【解决方案4】：

添加显示：块； #wrapper {} - 我遇到了完全相同的问题，添加的 padding-bottom 在 IE8 下开始正常工作，其他浏览器不受影响（保持正确的输出）

【讨论】：

【解决方案5】：

您只能为 IE8 添加伪元素 «after»：

<!--[if IE 8]>
<style type="text/css">
#wrapper:after {
    content: '';
    display: block;
    height: 10px;
}
</style>
<![endif]-->

【讨论】：