css - 按钮动画上的 Chrome 错误

Question

我在 Wordpress 网站上遇到了一个小问题，我必须为按钮制作一个从左到右的动画。所以我使用“线性渐变”，问题是，仅在 Chrome 上，有时(不是在所有按钮上(？？？？？))按钮右侧或左侧有一条小颜色线(有时你只有当你悬停鼠标时才能看到它)

这是网站上出现错误的按钮之一的代码:

a {
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    color: #FFF;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 35px;
        -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #515050), color-stop(50%, #ddc39f));
    background: -webkit-linear-gradient(left, #515050 50%, #ddc39f 50%);
    background: -o-linear-gradient(left, #515050 50%, #ddc39f 50%);
    background: linear-gradient(to right, #515050 50%, #ddc39f 50%);
    background-size: 200% 100%;
    background-position: left bottom;
}

a:hover {
    background-position: -100% 0;
}

<a href="#">En savoir plus</a>

在这里，您可以看到它由于某种原因没有出现错误，但是在网站中(当我悬停它时):

Chrome button bug

所以，我尝试用另一种方式制作动画，使用伪元素，就像那样:

a {
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    background-color: #ddc39f;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
    padding: 8px 20px 8px 11px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
}

a:after {
    content: '';
    position: absolute;
    background: #515050;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    transition: all 0.3s ease 0s;
    z-index: -1;
}

a:hover {
    background: transparent;
}

a:hover:after {
  right: 0;
}

<a href="#">En savoir plus</a>

但是这个动画的问题是背景必须通过透明，否则动画(伪元素)无法显示。

所以我问你，如果可能的话，有没有办法调试第一个解决方案，那个只在 chrome 上有错误的解决方案，或者有没有办法重现与第一个使用伪元素完全相同的效果？知道我无法在其中添加文本，因为我使用的是 WordPress，这不会使一切复杂化。

谢谢你的帮助

Answer 1

对于那些有一天遇到同样问题的人。显然问题出在显示器上，请尝试输入:

display: inline-table;

它应该可以解决问题。