Div内部按钮在IE中无法正常工作

Question

我想在<div>内放置一个绝对的<button>元素，该元素需要略微超出按钮边界，如下所示：

HTML：

<button class="container">
  <div class="child">child</div>
</button>

CSS：

.container {
  position: relative;
}
.child {
  position: absolute;
  top: -1rem;
  left: 1rem;
}

这与我在Chrome中的预期完全相同，但在IE中，孩子不会退出按钮边界，这是fiddle。

铬：

IE

在IE 11和Chrome 51中测试过。

Answer 1

将overflow: visible;添加到按钮元素。

重复：

IE8 and IE9 :before and :after elements position absolute are hidden

IE8 absolute positioned elements within button element are wrong