Firefox与Webkit中的按钮呈现方式不同-ButtonrendereddifferentlyinFirefoxvsWebkit

I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari.

我在div中有几个具有特定宽度的按钮,我遇到的问题是按钮在firefox vs chrome和safari中呈现的方式不同。

In firefox, the buttons are bigger and are messing up my layout.

在Firefox中,按钮更大,并且弄乱了我的布局。

    Price
    Bedrooms
    Compare

CSS:

button {
display:inline;
float:left;
background-color:orange;
border:1px solid orange;
border-radius:5px;
-moz-border-radius:5px;

font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
cursor:pointer;
padding:4px 10px 3px 7px;

}

#sort_by {
width:265px;
height:35px;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#c9c9c9;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}

Rendered in firefox:

在Firefox中呈现:

Rendered in Chrome:

在Chrome中呈现:

It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.

可以看出firefox中的按钮更大。我怎样才能解决这个问题?谢谢。

1 个解决方案

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}