按鈕在Firefox和Webkit中的呈現方式不同

我在div中使用特定寬度的按鈕時遇到了一個問題，那就是按鈕在firefox vs chrome和safari中的顯示方式不同。按鈕在Firefox和Webkit中的呈現方式不同

在firefox中，按鈕更大，並且搞亂了我的佈局。

<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：

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

在Firefox中的呈現：

enter image description here

渲染在Chrome：

enter image description here

可以看出，Firefox中的按鈕更大。我怎樣才能解決這個問題？謝謝。

來源

2011-05-09 AlexBrand

火狐增加了額外的保證金/填充到button元素不能被標準的CSS改變，但是，您可以添加以下使其行爲

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

來源

2011-05-09 16:33:56 JaredMcAteer

我已經使用YUI重置復位。我查看了代碼，他們似乎沒有包含按鈕元素。奇怪的。 – AlexBrand 2011-05-09 16:40:01

事實上，YUI2的CSS重置包括它... – JaredMcAteer 2011-05-09 16:43:08

我想知道爲什麼YUI3沒有。感謝您的建議。 – AlexBrand 2011-05-09 16:45:53

按鈕在Firefox和Webkit中的呈現方式不同

回答

相關問題