Safari按钮hover时padding区域未完全填充hover颜色兼容问题

问题表现 #

按钮触发:hover状态时，整个按钮区域没有完全变为设置的hover-color，Chrome下表现符合预期。初步判断问题与padding属性设置有关。

运行效果对比 #

• Safari实际运行效果：
  
• Chrome预期运行效果：
  

复现代码 #

CSS代码 #

.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;
}

HTML代码 #

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

问题原因 #

该问题是Safari对行内元素的默认渲染规则导致的：<a>标签默认display属性值为inline，属于行内元素，行内元素的垂直方向padding不会被计入元素的实际布局空间、hover交互触发区域以及背景渲染范围，因此设置大数值垂直padding时，会出现hover背景覆盖不全的问题，和padding设置直接相关。

修复方案 #

给.btn选择器添加display: inline-block声明，将链接转换为行内块元素，让浏览器正确计算padding占据的全部空间，即可让hover背景完整覆盖整个按钮区域。
修复后的核心样式：

.btn,
a.btn{
    display: inline-block; /* 新增该行修复Safari渲染问题 */
    background-color: #027BFF;
    border-color: #007bff;
    color: #fff;
    border-radius: 0;
    padding: 42px 20px;
    /* 其余原有样式保持不变 */
}

如果需要按钮独占一行，也可以将display值设置为block，效果一致。

内容的提问来源于stack exchange，提问作者DavidDunham