这里是应用于此元素的CSS：
font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;
我可以说出与该字体完全相同的所有内容，但它们仍然显示不同（请参见图片）。为什么？
#1 楼
Chrome使用WebKit渲染引擎。 Firefox使用Gecko引擎。解释和显示类型都略有不同，IE9 +和Opera中使用的DirectX和Vega图形引擎也是如此。请确保导航在各个浏览器上的宽度相同：使用图像或SVG代替导航栏元素的类型。如果您的导航区域不太可能经常更改，这可能会很有用。例如www.apple.com
使用CSS固定每个导航元素的宽度。两种浏览器之间的文本大小仍然会有所不同，但是如果您为导航区域中的每个
<li>元素提供固定的像素宽度，则各个链接的边界框在各个浏览器中将非常相似，并且导航区域的总宽度应相同。评论
您要谨慎对待诸如“使用图像代替导航栏元素的类型”之类的内容。除非您也提供双分辨率副本，否则在带有高分辨率显示器（例如Apple“ Retina”显示器，某些其他智能手机）的较新机器上，图像将看起来很糟糕。
–奥利·霍奇森（Olly Hodgson）
2012年8月8日在11:52
@OllyHodgson当然。双倍尺寸的PNG或SVG（Apple在其导航中使用的）最适合高分辨率屏幕。
–尼克
2012年8月9日在10:12
@Nick-是的，SVG将是最好的解决方案。
– m93a
13-10-17在14:30
在这种情况下，事实并非如此。 Firefox不支持SVG元素上的字母间距。
–是
19年2月14日在5:50
@ Yay295您可以在SVG中概述字体。
–尼克
19年2月14日在9:31
#2 楼
在不同的浏览器之间（以及在不同的操作系统上），字体呈现的差异是事实。您只需要确保如果字体以不同的宽度显示，您的设计仍然可以应付。#3 楼
万一有人遇到这个问题，对我来说问题是letter-spacing。 Chrome和Firefox对属性的处理方式不同。我的问题是
letter-spacing正在影响其他元素的位置；尤其是导航菜单中的某些图像。通过删除该属性，我的问题得到了立即解决。#4 楼
您可以通过
http://developer.yahoo.com/yui/reset/
希望重设CSS重设CSS。你会得到一些线索
#5 楼
我发现webkit将支持px的字体大小，但是对于字母间距之类的东西，如果您不使用em，它们将全部忽略。#6 楼
在两个操作系统上测试了6个浏览器/ 4渲染引擎之后。我发现即使行距相同，大多数内容也相同。我将在一分钟之内研究一下Windows和Linux的区别。 （不同的Chrome）会误导我。无论如何，如果您指定罗马时间或使用@fontface提供字体文件！您可能可以使导航栏变亮;-)
#7 楼
我遇到了类似的问题，找到了解决方案：使用：
font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;
在Firefox中，它看起来很棒。在Chrome中，字母间距很奇怪。删除
optimizelegibility样式就可以了。两种浏览器现在呈现相同的图像。 我决定删除Webkit的样式，并将其保留在其他浏览器中。现在看起来不错。
#8 楼
我在Open-Sans上遇到了类似的问题，这对我有用：-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
评论
您是否先完成了CSS重置？@kei：重置似乎没有效果
有趣。我得到的结果与您的图像相同：jsfiddle.net/YGwcn似乎可以归结为每个浏览器如何解释样式。
有点让我想起了“回到过去”，当您进入Internet Explorer与Netscape的斗争时……。