Chrome 按钮附加填充答案

【问题标题】：Chrome button additional paddingChrome 按钮附加填充
【发布时间】：2013-11-23 22:13:46
【问题描述】：

我在我的 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: 15px;
你弄明白了吗？如果它对您有用，请接受答案。否则，人们可能不会回答您将来写的任何问题。这就是我们在这里获得报酬的方式——人们接受我们的回答（假设他们有效）
嘿，迈克 - 抱歉，我在英国时间，昨晚午夜左右收到了答案，所以我没能看到他们 - 我今天午餐时可以试试我会确保接受正确的答案，否则我会找到正确的标记并自己发布。我讨厌找到一个没有答案的线程！ @MikeBarwick

标签： css google-chrome firefox padding

【解决方案1】：

完全放弃顶部/底部的填充并使用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
}

【讨论】：