在下面的示例中，它是一个导航栏。它的元素的宽度是可变的，它们的宽度之和就是它们容器 ul 元素的宽度。
问题是，每个元素在所有 Windows 浏览器上都有相同的宽度，它们的宽度总和是 379px。但在 mac 上，每个浏览器似乎呈现的字体略有不同，导致宽度增加或减少，因此最后一个元素换行到第二行。
<html>
<head>
<style>
body {margin:0;padding: 0;}
ul {margin:0;padding:0;list-style-type: none;}
.nav {
width:379px;
}
.nav li {
float: left;
margin: 5px;
padding: 20px;
background-color: #0099ff;
color: white;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="nav">
<li>asdf</li>
<li>qwer</li>
<li>test 1</li>
<li>testing test</li>
</ul>
</body>
</html>
问题是，如何通过指定字体大小来保证每个元素在所有浏览器上的宽度。
最佳答案
设置固定宽度的 div 加上填充大小在处理文本时很棘手。您不太可能获得在所有主要浏览器和平台上呈现完全相同大小的字符串。虽然你可以很接近；这里有一些建议。
指定
px值而不是pt或em。无论设备分辨率如何，此类文本都将以相同大小呈现，并且在放大和缩小时仍会正确缩放使用非常常见的字体，或者网络字体。您可以使用 Font Squirrel 去除您想要使用的特定字体的版本
明确设置
font-smoothing方法根据生成的 div 宽度与目标宽度的差异，使用计算的 CSS 属性将
letter-spacing偏移一个分数。这将是准确的，但也很复杂且不太兼容改用 JavaScript 进行上述计算，从而产生更兼容的代码
预先渲染一些 PNG，或在运行时在服务器端渲染
下面是一些示例代码，展示了一种获得更一致的跨平台 Arial 文本呈现的方法。
html, body {
font-family: Arial, sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
关于html - Mac 上浏览器之间的字体大小不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20187199/