CSS：之前和之后位置：IE中的相对问题

Question

问题

我正在创建一个:before伪元素，当它的主要元素是position: relative;时，IE上会发生以下情况，所有版本 - 我想要现代浏览器＆＃39效果：

在Chrome（工作）中：

如果您不太了解，我会解释：overlay在Internet Explorer中的位置相对时仅限于元素本身。 Chrome，Firefox和＆＃34;现代浏览器＆＃34;一切正常。

要查看互动示例，我已准备好right here, in JsFiddle。

请注意我真的需要才能相对定位button。

背后的代码

HTML：

<button>Play</button>

CSS：

button {
    position: relative;
    margin: 250px;
}

button:before {
    background-color: green;
    width: 50px;
    height: 50px;
    position: absolute;
    content: 'Overlay';
    margin-left: -30px;
}

Answer 1

将overflow: visible添加到按钮：

button {
    position: relative;
    margin: 250px;
    overflow: visible;
}