4

在 Chrome 和 FireFox 中查看这个 JSFiddle 示例。

在 Chrome 中，该按钮应该比在 FireFox 中小一点。我已经添加了如何在 Firefox 4 + 中重置默认按钮样式的解决方案 CSS （这使按钮更小），但在 FireFox 中按钮仍然更大。在这个例子中差异不是很明显，但是看看它是如何影响我的设计的。

铬合金：
铬屏幕截图

火狐：
火狐截图

如您所见，该按钮在 FireFox 中较粗，并且正在影响布局。有没有办法避免使用样式化的 div 代替按钮？

另外，我正在使用 Meyer 的 CSS 重置样式表

4

4 回答 4

10

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;
}
于 2012-07-23T02:52:07.687 回答
3

我得出的结论是，确保按钮/提交输入在浏览器中保持相同的唯一方法是使用 div 重新创建它们。创建按钮输入很容易，因为您可以像在按钮上一样将点击事件附加到 div 上。创建提交输入几乎没有任何困难。我使用 jQuery 解决了这个问题，方法是声明一个类，例如“提交”，并将提交按钮功能添加到加载该类的所有元素。这是一个例子：

// On page load:
$('.submit').on('click', function(e) {
    $(this).closest('form').submit();
});

提交类不在表单中的div在单击时不会执行任何操作。

如果向元素添加tabindex="n"（其中n是数字），也可以使用 tab 来聚焦，就像普通按钮一样。:focus您还可以通过使用css 伪类来设置它的样式以显示它的焦点。然后您可以使用空格或回车键单击带有此事件处理程序的按钮：

$('.submit').on('keypress', function(e) {
    if (e.keyCode == 13 || e.keyCode == 32)
        $(this).closest('form').submit();
});

（我匆忙写了最后一个片段，并没有实际测试过。如果您发现其中有错误或测试成功，请相应地编辑此答案。）

于 2012-07-27T21:08:50.563 回答
2

你有没有机会line-height在你的页面上的按钮上设置一个？你没有在小提琴上，但line-height's 不正常，不被 Firefox 接受，我相信其他一些浏览器 - 也许是 IE，我不确定。

于 2012-07-23T03:20:18.373 回答
0

您是否尝试过 CSS 重置？我在这台计算机上没有 FF，否则我会检查这是否有效。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
于 2012-07-23T02:53:44.770 回答