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

伪元素 hover Safari 问题

Pseudo element hover Safari issues

css

pseudo-element