如何在 Chrome 和 Firefox 中设置相同的按钮输入样式? [英] How to style button inputs to be identical in Chrome and Firefox?

问题描述

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

Take a look at this JSFiddle example in Chrome and FireFox.

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

In Chrome, the button should be a tad smaller than in FireFox. I have added the solution CSS from How to reset default button style in Firefox 4 + (which made the button a little smaller) but the button is still bigger in FireFox. The difference isn't very visible in this example, but have a look at how it affects my design.

铬:

火狐:

如您所见，FireFox 中的按钮较粗，并且影响了布局.有什么办法可以避免这种使用样式化 div 代替按钮的方法吗?

As you can see the button is thicker in FireFox and is affecting the layout. Is there any way of avoiding this short of using styled divs in place of buttons?

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

Also, I'm using Meyer's CSS reset stylesheet

推荐答案

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

I have concluded that the only way of ensuring that button/submit inputs remain identical across browsers is to recreate them using divs. Creating button inputs is easy since you can attach click events onto divs the same way as on buttons. Creating submit inputs is barely any harder. I solved it using jQuery by declaring a class, for instance 'submit', and adding the submit button functionality to all elements that have that class on load. Here's an exampe:

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

带有 submit 类但不在表单中的 Div 在单击时将不执行任何操作.

Divs with the submit class that are not in a form will do nothing when clicked.

如果您将 tabindex="n"(其中 n 是一个数字)添加到元素中，它也可以使用 tab 来聚焦，就像普通按钮一样.您还可以通过使用 :focus css 伪类来设置样式以显示它的焦点.然后你可以使用空格或输入来点击这个事件处理程序的按钮:

If you add tabindex="n" (where n is a number) to the element, it can also be focused using tab, just like a normal button. You can also style it to show that it's focused by using the :focus css pseudo-class. Then you could use space or enter to click the button with this event handler:

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

_{(我匆忙写了最后一个片段，还没有实际测试过.如果您发现其中有错误或测试成功，请相应地编辑此答案.)}

这篇关于如何在 Chrome 和 Firefox 中设置相同的按钮输入样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！