Question

在以下示例中，它是一个导航栏。它的元素宽度可变，它们的宽度之和是它们的容器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>

问题是，如何通过指定字体大小来保证所有浏览器上每个元素的宽度。

Answer 1

使用文本时，设置固定宽度的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;
}

Answer 2

首先，验证您的HTML。你有一些问题，比如缺少DOCTYPE。我还建议使用HTML5BOILERPLATE进行大量的规范化。

下一步：为什么宽度取决于字体大小？将字体大小设置为静态并为元素设置一定的静态宽度不是更好吗？如果您害怕这种行为会导致小型场景（移动设备）上的阅读问题，您应该阅读有关响应式布局的信息。他们利用媒体查询根据某些规则使用备用CSS。

Answer 3

如果你无法使它工作，那么用透明背景加载.png文本会相当简单。

Mac上的浏览器之间的字体大小不一致

3 个答案: