是什么导致这些按钮上的神秘垂直偏移？
我有四个元素显示为按钮.两个是<button>s,一个是一个<a>,一个是<input type="submit">.
的文字<a>是非常轻微垂直相对偏移了别人,我想不通为什么.这种情况发生在Chrome,Firefox,Safari和IE 11中.
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<style>
*{
margin:0;
padding:0;
border:0;
border-collapse:collapse;
border-spacing:0;
font-size:inherit;
font-style:inherit;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight:inherit;
text-decoration:none;
color:inherit;
background-color:transparent;
list-style-type:none;
}
button,
.button,
input[type=submit]{
cursor:pointer;
padding:10px;
margin-bottom:10px;
box-sizing:border-box;
border-radius:5px;
background-color:#eee;
line-height:24px;
height:48px;
display:inline-block;
vertical-align:middle;
text-transform:uppercase;
letter-spacing:2px;
background-color:#69c;
color:#fff;
font-weight:bold;
text-align:center;
font-size:10px;
transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
button:hover,
.button:hover,
input[type=submit]:hover{
background-color:#7ad;
}
</style>
</head>
<body>
<button>Foo</button>
<button>Bar</button>
<a class="button">Baz</a>
<input type="submit" value="Yar" />
</body>
</html>我曾经window.getComputedStyle在Bar和Baz再使用vimdiff的输出进行比较.这些是两者之间的唯一区别:
#bar{
align-items: flex-start;
perspective-origin: 23.5625px;
transform-origin: 23.5625px 24px;
-webkit-logical-width: 47.125px;
width: 47.125px;
}
#baz{
align-items: stretch;
perspective-origin: 23.1875px;
transform-origin: 23.1875px 24px;
-webkit-logical-width: 46.375px;
width: 46.375px;
}
既没有透视也没有应用变换,所以那些应该是无关紧要的.
有什么想法吗？
的文本<button>居中对齐，但文本居中<a>对齐。在vertical-align适用于元素本身而已，不是元素中的文本。
文本将在该行内居中对齐。因此，如果line-height匹配元素的高度（减去填充），则所有内容都居中。
所以行高应该是height - padding-top - padding-bottom= 48px - 10px - 10px=28px
CSS
button, .button, input[type=submit] {
line-height: 28px;
}