html - 为什么 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

浏览器对规范的解释？

A value of 'scroll' would tell UAs that support a visible scrolling mechanism to display one so that users could access the clipped content.

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

兼容的解决方法:

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