如何显示：在 IE 中具有负绝对位置的伪元素之前答案

【问题标题】：How do I show :before pseudo-element with negative absolute position in IE如何显示：在 IE 中具有负绝对位置的伪元素之前
【发布时间】：2017-01-03 11:38:45
【问题描述】：

我有一个绝对定位的::before 伪元素，我正在尝试用CSS 在上面添加一个箭头。具体来说，此箭头出现在悬停时。

在除 IE 之外的所有浏览器中，这都可以正常工作。在 IE 中，伪元素出现在悬停时，但位于按钮父级 div 的“后面”。这使它看起来好像根本没有显示箭头。

z-index 属性似乎无效。我在这里设置了一个 jsfiddle：

https://jsfiddle.net/gk8rsjkp/

感谢任何建议。

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码，最好是Stack Snippet。虽然您提供了link to an example or site，但如果链接失效，您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。

标签： html css internet-explorer css-position

【解决方案1】：

对于遇到类似问题的任何人：

使用实际的 button 元素会导致问题。切换到div 解决了这个问题。这个怪癖似乎仅限于 IE。

【讨论】：

【解决方案2】：

在 IE 中，您必须声明 :hover 以及 :hover:before。

button:hover { } /* IE needs this to trigger the :hover:before */
button:hover:before {
  content: " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid blue;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

button {
  position: relative;
    margin: 10px;
    border-radius: 25px;
    display: inline-block;
    padding: 8px 36px;
    background: gray;
}

<div class="wrapper">
  <button>
    Button
  </button>
</div>

【讨论】：

这似乎是一个悬停伪元素在 IE 中根本不适用的解决方案。但是，我的问题原来是按钮元素。切换到 div 解决了这个问题。