Safari 盒子阴影错误？

Question

我有一个带填充的元素，在:hover上设置背景颜色和框阴影

（悬停时）Safari 似乎无法用新的背景颜色正确填充该区域。一旦我从悬停事件中删除box-shadow属性，就会按预期工作...

如何保留 box-shadow 并解决 Safari 的问题？

.btn,
a.btn{
    background-color: #027BFF;
    padding: 42px 20px;
}

.btn:hover, a.btn:hover {
    background-color: pink;
    box-shadow: 0 0 0 10px #888;
}

<a href="#" class="btn btn-primary" onclick="javascript: something()"><span>Search</span></a>

比较：

Answer 1

添加相对位置

.btn {
    background-color: #027BFF;
    padding: 42px 20px;
    position: relative;
}

.btn:hover {
  background-color: pink;
  box-shadow: 0 0 0 10px #888;
}

<a href="#" class="btn btn-primary" onclick="javascript: something()"><span>Search</span></a>

使用按钮标签怎么样？

.btn {
    background-color: #027BFF;
    padding: 42px 20px;
}

.btn:hover {
  background-color: pink;
  box-shadow: 0 0 0 10px #888;
}

<button href="#" class="btn btn-primary" onclick="javascript: something()"><span>Search</span></button>