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'的值会告诉UAs 支持可见滚动机制，以显示一个用户可以访问剪辑的内容。

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

兼容的解决方法：

#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

阅读this帖子，我认为这对我来说很有帮助

Answer 4

添加display：block;到#wrapper {} - 我有完全相同的问题，这个添加的填充底部开始在IE8下正常工作，其他浏览器没有受到影响（保持正确的输出）

Answer 5

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

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

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

5 个答案: