Why there is no bottom padding in Internet Explorer 8?

Why in the following code there is no bottom padding in Internet Explorer 8 ?

HTML:

<div id="wrapper">
    <div class="a">Hello</div>
    <div class开发者_StackOverflow中文版="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;
}

Any workarounds for browser compatibility ?

browser interpretation of the specs?

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

Taken literally that means they, the browsers, can please themselves and they only have to provide access to the content not the padding or borders ;)

a compatible workaround:

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

How about going dirty? (Heck, I'm a programmer, not a designer lol).

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

And:

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

:D

Read this post i think it will be helpful it did the trick for me

add display: block; to #wrapper {} - I had exactly the same issue, with this added padding-bottom started to work properly under IE8 and other browsers was not affected (keep the proper output)

You can add a pseudo-element «after» only for IE8:

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