html - CSS :before & position: relative issue in IE

Question

问题

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

在 Chrome 中(工作):

如果你没理解清楚，我解释一下:overlay 在 Internet Explorer 中是相对位置时，仅限于元素本身。 Chrome、Firefox 和“现代浏览器”都可以正常工作。

看交互例子，我给你准备了right here, in JsFiddle .

请注意，我确实需要让按钮相对定位。

代码隐藏

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