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

Question

为什么下面的代码在 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;
}

浏览器兼容性有什么解决方法吗？

Answer 1

浏览器对规范的解释？

“scroll”的值会告诉用户代理
支持可见滚动
机制来显示一个以便用户
可以访问剪辑的内容。

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

兼容的解决方法：

#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>

Answer 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

Answer 3

阅读这篇帖子我认为这对我很有帮助，它对我有用

Answer 4

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

Answer 5

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

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