為什么 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' 的值將告訴支持可見滾動機制的 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>

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

添加顯示：塊； 到 #wrapper {} - 我遇到了完全相同的問題，添加的 padding-bottom 在 IE8 下開始正常工作，其他瀏覽器不受影響（保持正確的輸出）

Answer 4

您只能為 IE8 添加偽元素 «after»：

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

Answer 5

閱讀這篇文章，我認為它對我有用