gpt4 book ai didi

html - 按钮在 Firefox 和 Webkit 中呈现不同

转载 作者:技术小花猫 更新时间:2023-10-29 12:49:52 26 4
gpt4 key购买 nike

我在一个具有特定宽度的 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中的按钮比较大。我怎样才能解决这个问题?谢谢。

最佳答案

Firefox 向 button 元素添加了额外的边距/填充,标准 CSS 无法更改这些元素,但是您可以添加以下内容以使其正常运行

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

关于html - 按钮在 Firefox 和 Webkit 中呈现不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5939781/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com