如何将按钮输入设置为在Chrome和Firefox中完全相同？ [英] How to style button inputs to be identical in Chrome and Firefox?

问题描述

查看 Chrome和FireFox中的此JSFiddle示例。

在Chrome中，按钮应该比FireFox小一点。我已添加解决方案CSS从如何重置默认按钮风格在Firefox 4 + （这使得按钮有点小）但在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.

Chrome：

Chrome:

FireFox：

FireFox:

正如你可以看到， 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's CSS重置样式表

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

推荐答案

我的结论是，确保按钮/提交输入在浏览器之间保持一致的唯一方法是重新创建使用div。创建按钮输入很容易，因为您可以按照与按钮上相同的方式将点击事件附加到div。创建提交输入几乎没有更难。我使用jQuery通过声明一个类，例如'submit'，并添加提交按钮功能到所有的类，在加载的元素解决。这是一个例子：

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();
});

与

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