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 中添加一个溢出：可见。

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

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