button - IE8 按钮元素内的绝对定位元素错误

Question

标题说明了一切:按钮元素的绝对定位子元素在 IE8 中是错误的
这是一个 fiddle
这是强制性的代码:

<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

您需要添加一个 overflow:visible 到按钮 css。

这是一个 fiddle https://jsfiddle.net/innerurge1/os2e9c2j/7/ .此外，您应该用 span 换掉 div，因为这更符合语义。 Div 在按钮中是“不允许的”，因为它们是 block 元素并且按钮是内联的。

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