按钮在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中的呈现方式不同

回答

相关问题