我创建了一个显示浏览器页面大小的页面。问题在于显示浏览器高度和宽度的文本。虽然文本在 Windows 计算机上完美对齐，但在 Mac 上查看时却显得严重偏离。还值得注意的是，使用外部资源时会出现此问题（http://fonts.com http://fonts.com）生成所需的字体“Rockwell Extra Bold”。
网站链接： http://howbigismybrowser.com/ http://howbigismybrowser.com/
保存文本的容器的基本 CSS 如下：
#display: {
background: #232323; border: 15px solid #fff;
color: #fff;
font-family: 'Rockwell W01 Extra Bold', Arial, sans-serif;
font-size: 4.063em;
text-align: center;
height: 170px;
line-height: 170px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
Update:
应用了“显示：表格”，但由于某种原因，字体底部有额外的空间。似乎没有额外的边距或填充。
正如您已经建议的那样，您正在使用的字体的行高似乎以不同的方式呈现。我尝试在检查器中更改字体系列：某些字体使用行高技巧可以很好地工作，而其他字体则不行。其他垂直居中的方式怎么样，例如：
<!-- language: lang-css -->
#display {
/* line-height: 170px; */
/* height: 170px; */
display: table;
[...]
}
#width, #height {
/* float: left; */
/* height: 100%; */
display: table-cell;
vertical-align: middle;
}
毫无疑问，您需要修复一些其他样式，但这可能是执行相同操作但不依赖行高的有效方法。
参考：http://css-tricks.com/centering-in-the-unknown/ http://css-tricks.com/centering-in-the-unknown/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
