Düğme, Firefox ve Webkit'te farklı şekilde oluşturuldu

Question

Belirli bir genişliğe sahip bir div içinde birkaç düğmem var ve düğmelerin, firefox ve chrome ve safari'de farklı şekilde işlendiği bir sorunla karşılaşıyorum.

Yangın filtresinde düğmeler daha büyük ve düzeni değiştiriyor.

<div id="sort_by"> 
    <button id="sort_by_price" class="sortButton" value="1">Price</button> 
    <button id="sort_by_bedrooms" class="sortButton" value="1">Bedrooms</button> 
    <button id="compareButton" class="sortButton">Compare</button> 
</div> 

CSS: ateş Rendered

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

: Chrome'da

Rendered:

Firefox'taki düğmelerin daha büyük olduğu görülebilir. Bunu nasıl düzeltebilirim? Teşekkürler.

Answer 1

Firefox standart CSS ile değiştirilemez button elemanları için ekstra marjı/dolgu, sen ancak zaten YUI reset kullanılarak reseted

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