伪元素悬停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/