如何在 Chrome 和 Firefox 中将按钮输入样式设置为相同？

Posted 2023-03-06

【中文标题】如何在 Chrome 和 Firefox 中将按钮输入样式设置为相同？

【英文标题】：How to style button inputs to be identical in Chrome and Firefox?

【发布时间】：2012-07-21 07:06:10

【问题描述】：

在 Chrome 和 FireFox 中查看 this JSFiddle example。

在 Chrome 中，按钮应该比在 FireFox 中小一点。我添加了来自How to reset default button style in Firefox 4 + 的解决方案 CSS（这使按钮变小了一点），但在 FireFox 中按钮仍然更大。此示例中的差异不是很明显，但请看看它如何影响我的设计。

铬：

火狐：

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

---

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

【参考方案1】：

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;

【讨论】：

抱歉，没看到。 -moz-focus-inner 通常是造成跨浏览器按钮大小差异的原因。没有通读整个问题。

【参考方案2】：

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

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cs-s-reset/cs-s-reset-min.css">

【讨论】：

我已经在使用一个，将其编辑到我的问题中。此外，JSFiddle 默认对 CSS 进行规范化。

【参考方案3】：

您有没有在页面上的按钮上设置line-height？您还没有搞定，但line-height 的其他内容不正常，在 Firefox 和我相信的其他一些浏览器上不被接受 - 也许是 IE，我不确定。

【讨论】：

我还没有碰过line-height 属性。好主意，但为什么这也会影响按钮的宽度？

在我看来，图像的宽度似乎没有改变。也许他们是。我不确定。

您的页面在线吗？我可以看看。

唉，事实并非如此。但是使用的样式和遇到的问题与我在问题中提供的 JSFiddle 示例相同

我没有遇到小提琴的问题。

【参考方案4】：

我得出的结论是，确保按钮/提交输入在浏览器中保持相同的唯一方法是使用 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，并没有实际测试过。如果您发现其中有错误或测试成功，请相应地编辑此答案。）}

【讨论】：

+1;我讨厌浏览器使输入样式变得困难的事实，因为我讨厌从头开始重新创建所有这些功能。我不建议这样做，但有时你必须做你必须做的事情。此外，极小的语义改进，使用$(this).closest('form').submit();

是的，我刚刚阅读了这两个函数的文档，closest 更适合这项任务。感谢您指出。

Tab 键和按 Enter 键是否可以使用键盘焦点？

@OskarBerggren 不是自动的，您必须在按钮中添加 tabindex="n" 和几行额外的 javascript。我更新了我的答案。

@Hubro 太好了，谢谢，很多网站都没有遵守这方面的事实标准。