在Firefox和Webkit中按钮呈现不同

Question

在Firefox和Webkit中按钮呈现不同

12

我有几个按钮在一个具有特定宽度的div内，但是我面临一个问题，即在firefox和chrome / safari中呈现的按钮不同。

在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中按钮更大。如何解决这个问题？谢谢。

- AlexBrand

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JaredMcAteer · Accepted Answer

Firefox在button元素中添加了一个额外的边距/填充，这不能通过标准CSS进行更改，但您可以添加以下内容来使其行为表现良好

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