字母间距问题/浏览器之间的差异

时间:2013-09-23 18:28:44

标签: html css web standards spacing

我正在处理我正在处理的网站的问题,而我似乎无法找到任何类型的解决方案。我遇到的问题在于网站的顶级菜单:尽管在大多数浏览器中看起来都不错,但是有一小部分浏览器通过在最后一项中添加额外的行来“中断”。

我一直在研究可能导致它的原因,问题似乎是浏览器处理字母间距的方式 - 某些浏览器,特别是移动浏览器,似乎在字符之间添加了一个额外的像素,使得标题内容不适合其空间。即使整个站点的字母间距设置为零,也会发生这种情况:某些浏览器似乎只是添加了一个额外的空间,因此大多数浏览器使用的为零将为-1。

在解决这个问题时,我的智慧结束了,除了在顶级菜单中使用图像之外,我无法想到任何其他内容,当然这是一个糟糕的主意。所以我想问一下这里是否有其他人遇到过这样的问题,如果有人知道怎么做,那么字符间距实际上是通过浏览器标准化的。

有问题的网站就是这个:

http://maxworth.ca/blog/

您可以定期使用Chrome看到问题(看起来不错),然后使用chrome dev工具将网站呈现为Android 4.0.2 - Galaxy Nexus。问题似乎出现在一堆(主要是移动的)浏览器上,虽然我知道该网站并没有完全编码,在移动浏览器中看起来很完美,但这是我们目前的一个游戏破解问题。

提前致谢。

1 个答案:

答案 0 :(得分:2)

我认为一个好方法是让你的菜单项“无理由”填充容器的宽度,无论字体大小,字母间距等,而不是试图操纵项目来填充空间。每个浏览器都会以不同的方式呈现文本,因此很难获得一致的外观。此解决方案非常有效:How do I justify a horizontal list?