Question

我发现Chrome在操作系统X上没有与Verdana对齐，类似于Firefox。例如，以下CSS规则用于比较：

font-family:verdana;
font-size:12px;
line-height:auto;

此图显示了每个操作系统（Mac OS X 10.8，Windows 7）上浏览器（Chrome 22，Firefox 14）之间的差异。

以下是相应的jsfiddle：

body {
  font-family: verdana;
  font-size: 12px;
  line-height: auto;
}

.banner {
  background: #e2e2e2;
  text-decoration: none;
  color: black;
}

.fixed {
  line-height: 15px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Verdana</title>
</head>

<body>
  <p class="banner">
    1.) line-height: auto
  </p>
  <p class="banner fixed">
    2.) line-height: 15px
  </p>
</body>

</html>

如何垂直对齐按钮中间的按钮上的文本 - 跨浏览器并跨操作系统？

Answer 1

只需使行高等于包装器的高度即可。这将使文本垂直居中。

.button {
   height:20px;
   line-height:20px;
}

为什么Verdana在不同操作系统的不同浏览器中呈现出不同的效果 - 比如Windows和OS X？

1 个答案: