I discovered Chrome doesn't align Verdana similar to Firefox on OS X. For example, the following CSS rule is applied for comparison:
我发现Chrome在操作系统X上没有与Verdana对齐，类似于Firefox。例如，以下CSS规则用于比较：
font-family:verdana;
font-size:12px;
line-height:auto;
This image shows the differences between browsers (Chrome 22, Firefox 14) on each operating system (Mac OS X 10.8, Windows 7).
此图显示了每个操作系统（Mac OS X 10.8，Windows 7）上浏览器（Chrome 22，Firefox 14）之间的差异。
Here is the corresponding jsfiddle to play around with:
以下是相应的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>How do you vertical align text on a button in the middle of a button - Cross browser and cross OS?
如何垂直对齐按钮中间的按钮上的文本 - 跨浏览器和交叉操作系统？
1 个解决方案
#1
0
Just make the line-height equal to the height of the wrapper. That will vertically center the text.
只需使行高等于包装器的高度即可。这将使文本垂直居中。
.button {
height:20px;
line-height:20px;
}
#1
0
Just make the line-height equal to the height of the wrapper. That will vertically center the text.
只需使行高等于包装器的高度即可。这将使文本垂直居中。
.button {
height:20px;
line-height:20px;
}