在下面的示例中，它是一个导航栏。它的元素的宽度是可变的，它们的宽度之和就是它们的容器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方法 -
使用计算的CSS属性，根据生成的div宽度与目标的差异量，将
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。您有一些问题，比如缺少DOCTYPE。我还推荐HTML5BOILERPLATE来完成大量的规范化工作
下一篇：为什么宽度取决于字体大小？将字体大小设置为静态并为元素设置一定的静态宽度不是更好吗
如果你害怕这种行为会导致小型sceens（移动设备）上的阅读问题，你应该阅读响应式布局。他们利用媒体查询来使用基于某些规则的替代CSS。
如果你不能让它工作，那么加载一个带有透明背景的.png文本会非常简单。