如何使网站在Linux上看起来一样

时间:2020-03-05 18:48:42  来源:igfitidea点击:

我有一个相当符合标准的XHTML + CSS网站,在PC和Mac上的所有浏览器上看起来都很不错。前几天,我在Linux上的FF3上看到了它,并且字母间距略大,使所有内容都乱七八糟,并导致不必要的换行和剪切。有问题的CSS有

font-size: 11px;
font-family: Arial, Helvetica, sans-serif;

我知道这与通用的sans-serif有关,无论映射到什么。如果添加以下内容,则文本会变得紧缩,足以接近其他平台上的文字:

letter-spacing: -1.5px;

但这会涉及一些讨厌的服务器端操作系统嗅探。如果有一个纯CSS解决方案,我很想听听。

有问题的系统是Ubuntu 7.04,但这无关紧要,因为我希望至少为大多数(如果不是全部)Linux用户修复它。当然,要求用户安装字体不是一种选择!

解决方案

回答

我发现解决浏览器之间字体大小问题的最简单方法是简单地留出错误空间。使div稍大些或者字体稍小一些,以便平台变化不会明显改变换行或者剪切。

回答

我们是否在Windows的FF3中尝试过?

我个人认为,良好的CSS重置可以使页面在所有浏览器中看起来都一样长。

回答

List Apart有一篇关于CSS字体大小的非常全面的文章。他们的结论是使用"`ems"来调整文本大小,因为它通常在浏览器之间提供最一致的大小。他们没有直接提及不同的操作系统,但是我们应该尝试使用ems。它可能会解决问题。

回答

大小/间距差异通常很难捕捉。我们可以做的是创建一个特定于Linux的CSS文件,该文件将包含针对Linux调整的这些值,然后如果User Agent是Linux代理,请执行基于JS的简单检测以注入该CSS。

这可能不是最干净的方法,但它会起作用,并且对我们本来要干净的HTML / CSS的侵入最少。

回答

除非站点期望基于Linux的流量超过正常水平,否则如果我们"牺牲用户调整其阅读环境的能力"而不是不关心Linux,可能会对更多的人产生不利影响。经验。

话虽如此,如果我们确实希望获得良好的Linux体验,则应解决字体间距小的变化而导致设计中断的原因,因为这些问题在当前CSS实现中很难控制。