将相同的样式应用于 <input> 和 <a> 标签会导致不同的布局[重复]答案

【问题标题】：Applying same styling to an <input> and an <a> tag results to different layout [duplicate]将相同的样式应用于 <input> 和 <a> 标签会导致不同的布局[重复]
【发布时间】：2015-01-07 00:47:00
【问题描述】：

我有一个用于样式按钮的 CSS 类。当我将它应用于<input> 和<a> 标签时，<a> 比<input> 小一点。这个问题出现在 Firefox (33) 中，但在 Chrome (38) 中看起来很好。

这是一个最小的例子：

.my-button {
  display: inline-block;
  padding: 1em;
        
  border-radius: 0.2em;
  border: 1px solid #000;
        
  line-height: 1em;
  font-size: 13px;
  text-decoration: none;
    
  background-color: #ccc;
  color: #000;
}

<input class="my-button" type="submit" value="Save">
<a class="my-button" href="#">Cancel</a>

你也可以在这里看到它：http://jsfiddle.net/tr4vbrha/4/

【问题讨论】：

建议的重复问题的答案是使用 javascript 重新创建带有 div 的按钮，我认为这是一个非常肮脏的解决方案。
你读错了答案。 Read again。或者，如果您无法找到正确答案，see a fiddle。
好的，谢谢。这似乎可以解决 Firefox 和 Chrome 的问题，但是 padding: 0 !important; 不是必需的 see fiddle。这可能是一个应该报告给 Firefox 的错误吗？
这个答案只是矫枉过正。只需选择一个有效的并继续前进。不，这不是错误。 Firefox 有自己的边距，可以通过前缀选择器来定位这一事实很可能是一种黑客攻击。我们在这里所做的只是解除黑客攻击。

标签： html css firefox button

【解决方案1】：

这是因为字体不同。 Windows 上的input 是Microsoft Sans Serif，而在a 标签中则是Times New Roman。

要解决此问题，请将 font-family 属性添加到 my-button 类。

【讨论】：

我不认为这可以解决问题，添加font-family: Arial; 不会改变任何东西：jsfiddle.net/tr4vbrha/7
我也看到了 Firefox 的不同，当我添加代码 font-family: "Times New Roman", Georgia, Serif;它们看起来一样。
在 Mac OSX Firefox 33.1 和 Ubuntu 14.04 Firefox 33.0 上，无论字体系列如何，都会出现问题。我无法验证 Windows。在 Safari 7.1 中它运行良好。
是的，我注意到了，抱歉，我以为是这样

【解决方案2】：

这可能是因为按钮的 box-sizing 属性与按钮的不同。我添加了这个：

input{
    box-sizing: content-box;
}

.my-button{
    min-width: 2.75em;
}

成功了

【讨论】：

它似乎没有改变什么：jsfiddle.net/tr4vbrha/10 输入标签处的box-sizing 值都没有改变。
首先：我忘记了在调整盒子大小之前需要 -moz-。
第二：使用开发工具，它与 2.75em 一起使用，但将其保存到与 3em 一起使用的文件中（差异为一个像素）。我不知道为什么它在 jsfiddle 上不起作用

【解决方案3】：

删除 css 属性：display:inline-block 见例子：demo

.my-button {

    padding: 1em;
    
    border-radius: 0.2em;
    border: 1px solid #000;
    
    line-height: 1em;
    font-size: 13px;
    font-family: Arial;
    text-decoration: none;

    background-color: #ccc;
    color: #000;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .my-button {
        display:inline-block
    }
}

<input class="my-button" type="submit" value="Save">
<a href="#" class="my-button">Cancel</a>

【讨论】：

他们在小提琴中看起来不同（Windows 上的 Firefox）。取消按钮比保存按钮高1px。
在 Firefox (Ubuntu) 中，您的演示可以运行，但在 Chrome 中，<input> 标签现在小于 <a>。
现在请检查......