在 Chrome 和 FireFox 中查看 this JSFiddle example。
在 Chrome 中，按钮应该比在 FireFox 中小一点。我添加了来自How to reset default button style in Firefox 4 + 的解决方案 CSS（这使按钮变小了一点），但在 FireFox 中按钮仍然更大。此示例中的差异不是很明显，但请看看它如何影响我的设计。
铬：
火狐：
如您所见，FireFox 中的按钮较粗，并且正在影响布局。有什么办法可以避免使用样式化的 div 代替按钮？
另外，我正在使用 Meyer 的 CSS 重置样式表
【问题讨论】：
标签： css firefox google-chrome button
Firefox 为 inputs 和 button 元素添加了特殊的填充。这会照顾它：
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
【讨论】：
您是否尝试过 CSS 重置？我在这台计算机上没有 FF，否则我会检查它是否有效。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
【讨论】：
您有没有在页面上的按钮上设置line-height？您还没有搞定，但line-height 的其他内容不正常，在 Firefox 和我相信的其他一些浏览器上不被接受 - 也许是 IE，我不确定。
【讨论】：
line-height 属性。好主意，但为什么这也会影响按钮的宽度？
我得出的结论是，确保按钮/提交输入在浏览器中保持相同的唯一方法是使用 div 重新创建它们。创建按钮输入很容易，因为您可以像在按钮上一样将点击事件附加到 div 上。创建提交输入几乎没有任何困难。我使用 jQuery 解决了这个问题，方法是声明一个类，例如“提交”，并将提交按钮功能添加到加载该类的所有元素。这是一个例子：
// On page load:
$('.submit').on('click', function(e) {
$(this).closest('form').submit();
});
具有 submit 类且不在表单中的 Div 在单击时不会执行任何操作。
如果您将tabindex="n"（其中n 是一个数字）添加到元素，也可以使用tab 来聚焦，就像普通按钮一样。您还可以通过使用 :focus css 伪类来设置它的样式以显示它的焦点。然后您可以使用空格或回车键单击带有此事件处理程序的按钮：
$('.submit').on('keypress', function(e) {
if (e.keyCode == 13 || e.keyCode == 32)
$(this).closest('form').submit();
});
（我匆忙写了最后一个sn-p，并没有实际测试过。如果您发现其中有错误或测试成功，请相应地编辑此答案。）
【讨论】：
$(this).closest('form').submit();
closest 更适合这项任务。感谢您指出。
tabindex="n" 和几行额外的 JavaScript。我更新了我的答案。