css - Chrome按钮附加填充

我在WP网站上使用了Contact Form 7，但提交按钮遇到了一个奇怪的问题。我使用以下类的按钮：

.ctaredbutton

background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 22px 30px;
text-transform: uppercase;
margin-left:20px

该按钮将在Firefox（http://cl.ly/SQ5Y）中按预期显示，但在Chrome（http://cl.ly/SPcr）中似乎有多余的填充。该表格位于'elitegolfusa.org/apply'

有没有人见过这个？我不知道额外的顶部填充来自何处？

最佳答案

完全放弃顶部/底部的填充，并使用line-height。将line-height设置为所需按钮的高度。

.ctaredbutton{
    background-color: #EA3939;
    border-radius: 40px 40px 40px 40px;
    color: #FFFFFF !important;
    font-family: Proxima Nova,Helvetica,sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height:45px; // I added this
    padding: 0 30px; // I changed this
    text-transform: uppercase;
    margin-left:20px
}

关于css - Chrome按钮附加填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19917729/