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

链接较短，因为其上的文字较短。如果要强制宽度，可以添加width或min-width的值。在这种情况下，您还需要摆脱左右填充，并可能将文本对齐在中心。

input[type="submit"], a:link, a:visited {
    min-width: 100px
    padding: 5px 0;
    text-align: center;
}

Answer 2

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

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

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

以下是代码段（请记住，这仅与Firefox浏览器相关）。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

将类编辑为以下内容，将宽度设置为相同，并确保使用框大小调整，以便宽度和高度包括内容，填充和边框。

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;
    text-align:center;
    width:250px;
    box-sizing:border-box;
}

Firefox中的链接和按钮高度不一样

3 个答案: