Question

我已将<div>用于某些按钮，但希望将其更改为<button>，因为这样更方便一些。

我做了那个简单的改变。令我惊讶的是，<button>会在<div>放置的位置下方显示一些像素（可能是10px）。

我试图查看所有CSS值，但我看不出有任何改变。我想我错过了什么......

任何人都知道我可以丢失什么CSS值？（这是在谷歌浏览器中，目前尚未在FF中测试过。）

更新：在FF中看起来相同。（即<button>位于较低位置。）并且所有计算的CSS值在FF中都相等。

所以，似乎有一些其他规则而不是将<button>放低。是否有一些HTML规则可以做到这一点，或??? ???

更新2 ：一切都是边框，当然......

更新3 ：以下是所有计算出的样式值（来自FF）：

animation-delay: 0s;
animation-direction: normal;
animation-duration: 0.65s;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: click-wave;
animation-play-state: running;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
background-attachment: scroll;
background-clip: border-box;
background-color: #CE742B;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-sizing: border-box;
color: #333;
cursor: pointer;
display: inline-block;
float: none;
font-family: RobotoDraft,"Helvetica Neue",Helvetica,Arial;
font-size: 14px;
font-weight: 400;
height: 32px;
line-height: 17px;
margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 0px;
min-width: 80px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 8px;
padding-right: 8px;
padding-top: 0px;
position: relative;
text-alignrightwidth: 80px;

Answer 1

我想我通过看看你的jsbin来解决它。太奇怪了，当你有连续的div +按钮时，width: 80px会导致按钮放置很糟糕。 IDK为什么会这样。

修复方法是添加float: left并正确对齐。或者使用div + div ||按钮+按钮。

什么CSS值使得按钮标签显示低于div-tag？

1 个答案: