Question

我有四个元素显示为按钮。其中两个是<button>个，一个是<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;
}

既没有透视也没有应用变换，所以那些应该是无关紧要的。

有什么想法吗？

Answer 1

<button>的文字在中间对齐，但<a>在顶部对齐。 vertical-align仅适用于元素本身，而不适用于元素中的文本。

文本将在行中居中对齐。因此，如果line-height匹配元素的高度（减去填充），则所有内容都居中。

因此，行高应为height - padding-top - padding-bottom = 48px - 10px - 10px = 28px

CSS

button, .button, input[type=submit] {
  line-height: 28px;
}

Answer 2

这是因为＆＃39; a＆＃39;以外的元素。自动居中内容。改变高度，你会看到除了锚之外它们都保持居中。因此，当您设置填充顶部时，它使它们看起来相同，但它只能在一定的尺寸下工作。

Answer 3

因为line-height应用于元素，您可以通过修改它来修复它：

<强> CSS

button, .button, input[type=submit] {
   line-height: 30px;
}

原因：因为您要为元素设置padding，代码的替代方法是删除height和line-height，然后仅使用padding，如下所示：

＆＃13;

<!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:18px 10px;
  margin-bottom:10px;
  box-sizing:border-box;
  border-radius:5px;
  background-color:#eee;
  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>

＆＃13;

Answer 4

#login声明似乎只会影响line-height。

（可能是因为其他三个元素都是.button元素，因此浏览器可能会预先应用 Shadow CSS默认样式吗？）

无论出于什么原因，将<form>应用到line-height，都可以解决问题。

每个元素的高度为.button

由于48px

，48px包含了填充

因此，要将文字放在box-sizing: border-box的垂直中间位置，您需要从高度移除填充顶部（.button）和填充底部（10px）（ 10px）。

48px

<强>解决方案：

删除

48px - 10px - 10px = 28px

这

line-height:24px;

并添加

button,
.button,
input[type=submit]{
...
}

到样式。

.button {
line-height:28px;
}

*{
  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;
  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 {
line-height:28px;
}

button:hover,
.button:hover,
input[type=submit]:hover{
  background-color:#7ad;
}

是什么导致这些按钮上的神秘垂直偏移？

4 个答案:

CSS