按钮动画上的铬错误

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>

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

铬按钮错误

因此，我尝试以另一种方式使用伪元素制作动画，如下所示：

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;

它应该可以解决问题。