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

在以下示例中，它是一个导航栏。它的元素的宽度是可变的，它们的宽度之和是它们的容器的宽度，元素是ul。问题是，每个元素在所有的Windows浏览器上都有相同的宽度，它们的宽度总和为379px。但是在Mac上，每个浏览器似乎都会使字体略有不同，导致宽度增加或减少，因此最后一个元素换行到第二行。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>

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

来源

2013-11-25 MMSs

首先，验证您的HTML。你有一些问题，比如缺少DOCTYPE。我也推荐使用HTML5BOILERPLATE来完成很多规范化。

下一页：为什么你的宽度取决于字体大小？将字体大小设置为静态并为元素设置一定的静态宽度不是更好吗？
如果您担心此行为会导致在小屏幕（移动设备）上发生问题，您应该阅读有关响应式布局。他们利用媒体查询根据特定规则使用替代CSS。

来源

2013-11-25 08:01:57

好的，谢谢你的建议。虽然，DOCTYPE在这里不是问题。宽度取决于字体大小以避免文本两侧的填充大小不同。 – MMSs

-1

如果你不能得到它的工作，它将是一个相当简单的加载文本的.png与透明背景。

来源

2013-11-25 08:09:48 izaic3

使用文本时，设置固定宽度的div加上填充大小是棘手的。您不可能在所有主流浏览器和平台上获得一个字符串来呈现完全相同的大小。虽然你可以非常接近;这里有一些建议。

指定px值，而不是pt或em。这些文本将呈现相同的大小，而不管设备分辨率如何，并且在放大和缩小时仍将适当缩放。
使用非常常见的字体或Web字体。您可以使用字体松鼠剥离下来的版本特定的字体，你想使用
精确设置font-smoothing方法
使用计算的CSS属性基础上，以抵消letter-spacing由一小部分结果div宽度与目标不同。这将是准确的，但也复杂和更兼容
使用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; 
}

来源

2014-11-12 22:44:41 Beejor

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

回答

相关问题