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

问题描述

看看本的jsfiddle例如Chrome和Firefox 的。

在Chrome浏览器，按钮应该是一点点比火狐小。我从添加的解决方案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:

火狐：结果

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?

另外，我使用的是梅耶的CSS样式表复位

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

推荐答案

我的结论是，确保该按钮的唯一方法/提交输入保持跨浏览器相同的是使用的div来重新创建它们。创建按钮输入很容易，因为你可以将点击事件上的div相同的方式上的按钮。创建提交的投入是几乎没有任何困难。我是使用jQuery声明一个类，例如提交，并添加提交按钮功能，具有负载该类的所有元素得到解决。这里有一个exampe：

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

使用div会在提交的类不在形式点击时会做什么。

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

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