html - Firefox 中的链接和按钮高度不同

Question

我在页面上有一个链接和一个按钮。影响它们的 CSS 代码是相同的，但输入的高度只是比输入短一点 - 关于如何使它们具有完全相同的高度有什么建议吗？ JSFiddle

HTML:

<input type="submit" value="Input"> <a href="#">Link</a>

CSS:

input[type="submit"], a:link, a:visited {
background-color: #4eb4df;
border: none;
  font-family: arial;
  color: #ffffff;
  border-radius: 4px;
  padding: 5px 20px;
  font-size: 1.2em;
  text-shadow: 1px 1px #6d6d6d;
  display: inline-block;
  margin: 30px auto 10px;
  text-transform: uppercase;
  text-decoration: none;
}
input[type="submit"]:hover, input[type="submit"]:active, a:hover, a:active {
  background-color: #3e94b9;
}

Answer 1

Firefox 呈现输入元素高度的方式似乎与其他浏览器不同。这非常烦人，但下面的代码解释了如何删除增加的高度。

我做了一些研究并弄清楚了。这似乎是 Firefox 的一个错误。这是另一个涵盖它的问题 Buttons too tall on Firefox 。这是一篇文章，其中解释了更多信息 http://davidwalsh.name/firefox-buttons .

这是一个jsfiddle https://jsfiddle.net/www139/e9gg7ncu/2/ .

这是一个代码片段(请记住，这仅与 Firefox 浏览器相关)。

input[type="submit"], a:link, a:visited {
    background-color: #4eb4df;
    border: none;
    font-family: arial;
    color: #ffffff;
    border-radius: 4px;
    padding: 5px 20px;
    font-size: 1.2em;
    text-shadow: 1px 1px #6d6d6d;
    display: inline-block;
    margin: 30px auto 10px;
    text-transform: uppercase;
    text-decoration: none;
    font-size:1em;
}
input[type="submit"]:hover, input[type="submit"]:active, a:hover, a:active {
    background-color: #3e94b9;
}
input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

<input type="submit" value="Input"> <a href="#">Link</a>