IE8 absolute positioned elements within button element are wrong

Question

Title says it all: absolute positioned children of a button element are wrong in IE8
Here's a fiddle
And here's the mandatory piece of code:

<button><div></div></button>
<style>
button{
    position: relative;
    width: 200px;
    height: 200px;
    border: 0;
    background: gray;
}
button div{
    position: absolute;
    top: 5px;
    left: 0px;
    width: 100px;
    height: 100px;
    background: red;
}​
</style>

I've searched and tried everything I could think of. Maybe I should abandon using the button element :-/

What's going on here?

Answer 1

You need to add an overflow:visible to the button css.

Here is a fiddle https://jsfiddle.net/innerurge1/os2e9c2j/7/. Also you should swap out the divs with spans as this is more semantic. Divs are not "allowed" in buttons, because they are block elements and buttons are inline.

.parent{
    position: relative;
    width: 200px;
    height: 200px;
    border: 0;
    background: gray;
    text-align : left;
    overflow:visible;
}