悬停在悬停的野生动物园元素，没有填充整个区域

Question

为什么在野生动物园（ON：悬停）中，整个按钮不转到我的悬停颜色？

（我认为填充有问题）

---结果safari：

---导致Chrome（预期）：

.btn,
a.btn{
    background-color: #027BFF;
    border-color: #007bff;
    color: #fff;
    border-radius: 0;
    padding: 42px 20px;
    transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
}

.btn:hover, a.btn:hover {
    background-color: pink;
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%);
    cursor: pointer;
}

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

Answer 1

我在Safari中对：Hover也有类似的问题。在悬停时，我的按钮并未像您的示例那样完全填充。

我将错误缩小到我的font-family：

body {font-family：inter，'arial narrow narrow bold'，sans-serif; }

我已经通过fonts.bunny.net导入Inter Inter，如果我删除Inter并使用系统字体：Hover的行为，则按预期行为。当我使用导入字体的那一刻，问题又回来了。

我能够通过使用切换到Google字体而不是fonts.bunny.net 来完全修复它。

Answer 2

问题似乎是出于野生动物园的处理 box -shadow - ＆gt;

.btn,
a.btn{
    background-color: #027BFF;
    border-color: #007bff;
    color: #fff;
    border-radius: 0;
    padding: 42px 20px;
    transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
}

.btn:hover, a.btn:hover {
    background-color: pink;
    color: #fff;
    /* box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%); */
    cursor: pointer;
}

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