button - ボタン要素内のIE8絶対配置要素が間違っています

Question

タイトルがすべてを物語っています: IE8では、ボタン要素の絶対配置の子が間違ってい
ます。

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

考えられる限りのことはすべて検索して試しました。ボタン要素の使用をやめるべきかもしれません:-/

何が起きてる？

Answer 1

ボタンの css に、overflow:visible を追加する必要があります。

ここにフィドルがあります https://jsfiddle.net/innerurge1/os2e9c2j/7/。また、これはよりセマンティックであるため、div をスパンと交換する必要があります。div はブロック要素であり、ボタンはインラインであるため、ボタンでは "許可" されません。

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