Firefox CSS间距问题跨域

Question

我遇到了Firefox问题。它在Windows中的显示与在OSX上的显示不同。它看起来是字体间距问题，或字体大小，但我无法弄清楚。两者都使用完全相同的属性。

Top Window：Mac OSX，Bottom：WinXP

以下是基本的HTML / Computed Style：

任何人的想法？

Answer 1

由于选择了字体，您很可能会看到delta。 Windows和Windows中只有少数字体是常见的。 Mac，其中一些（Lucida Sans / Lucida Sans Unicode）在这些平台上包含不同的字距。

查看相关元素的CSS字体信息会非常有用。

解决方案（假设它是上面提到的字距调整问题）：

1. 选择在两个平台上都更好的字体。在这种情况下，Arial可能效果很好。

2. 选择较窄的字体并确保它适用于两个平台。

3. 确保设计可以容纳额外的宽度。如果您的购物车中有10件商品或超过100美元，我想你会发现你在Windows中遇到问题。

你可以使用cufon，但由于许可和可印刷性问题，我不是它的忠实粉丝。您可以从像MyFonts这样的人那里以非常便宜的方式许可字体。

Answer 2

如果您希望构建最佳的跨浏览器体验，一些CSS调整将使更宽容的布局和减少任何字体渲染差异。

例如，要改善您当前的标记，您应该：

• 将<div class="topNav">浮动或绝对定位到其父元素的右上角
• 右对齐topNav
中的所有文字

这将确保您的顶部导航将始终向左扩展，而不会超出右侧的页面（如底部Windows XP / Firefox屏幕截图所示）。

在此更改之后，字体差异将会减少，因为布局可以适度增长或扩展，同时更改cartNav不会破坏布局。

在进行这些更改时，您可以考虑将子导航图标合并到CSS Sprite。

作为网络开发人员，我们习惯于浏览器测试和呈现不一致性，但考虑到除了你自己（当然可能是同事开发人员或客户端）以外的任何人都不太可能比较这种方式该网站在浏览器或操作系统之间呈现。

Answer 3

字体字距调整操作系统之间的差异。 它非常hackish，但如果你不能使用版本之间更一致的字体，你总是可以破解字距... http://www.w3schools.com/css/pr_text_letter-spacing.asp