伪元素悬停Safari问题

Question

我真的希望有人可以帮助我解决这个问题。

我有一种形状，我想在它上面盘旋时改变背景颜色。我已经让它在所有浏览器中工作，除了Safari。

您可以在此处查看：http://jsfiddle.net/bgLv6L9j/5/ 我尝试使用以下代码来使悬停工作，但它切断了一半的文本。我尝试添加形状的尺寸，但这也使它看起来很不稳定。

.shape:hover::before {
background-color: #245a85;
content: "";
  position:absolute;
  }

我已经查看了同样问题的各种其他主题，但似乎无法找到任何特定于Safari的问题（或解决方案）。

我真的很感激，如果有人可以快速看一看，看看我在伪元素方面出了什么问题，并让背景悬停在Safari中工作。

Answer 1

如果你这样做：

.shape a {
    position: absolute;
}

而不是relative似乎可以解决问题。

http://jsfiddle.net/bgLv6L9j/7/

修改

我用一个基于你的简单代码重写了它。

HTML

<a class="shape" href="#">Text</a>

CSS

.shape {
    border: 2px solid crimson;
    border-radius: 5px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 150px;
    height: 75px;
    -moz-transform: perspective(40em) rotatex(-45deg);
    -ms-transform: perspective(40em) rotatex(-45deg);
    -o-transform: perspective(40em) rotatex(-45deg);
    -webkit-transform: perspective(40em) rotatex(-45deg);
    transform: perspective(40em) rotatex(-45deg);
}

.shape:hover {
    background: crimson;
}

就是这样。 http://jsfiddle.net/8sdqteke/