文本在不同平台上的大小不同

Question

如果每个平台呈现不同大小的文本，如何在不同平台上获得精确的大小调整？最近发布的Firefox 4使这个问题更加严重。此版本使用DirectWrite启用文本的硬件渲染。使用DirectWrite编写的文本的大小比没有硬件加速的文本大得多。请注意以下示例。如果您需要查看，那么这是live example CSS。

• Windows 7 64位主页
• ATI Radeon HD 4670
• DirectWrite的是关闭，因为没有更新我的驱动程序。
• 620 x 283

• Windows Vista 64位业务
• nVidia GeForce 8800GT
• DirectWrite的是 ，因为我刚刚更新了我的驱动程序。
• 620 x 293

HTML

<ul>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
</ul>
<div>
 Content
</div>

CSS

ul {
 float: left;
 width: 10em;
}

div {
 margin: 0 0 0 12.7em;
 min-height: 26.1em;
} 

你怎么看导航线与内容时DirectWrite已停用，但导航是比当DirectWrite的是在内容高？我知道有一些hacky解决方案。一种是在px中指定所有内容（font-size, width, height）。这不是理想的，因为该组件将不会是模块化的 - 也就是说，它不能被扩展到其他尺寸的另一设置重复使用。它还打破了IE6的字体大小选项。另一种解决方案是使用JavaScript来读取导航的物理高度并使内容具有相同的高度。这并不理想，因为它是CSS的风格角色。这有什么CSS解决方案吗？

这只是许多例子中的一个。另一个是Ubuntu 9上的Firefox 3有更宽的文本，因此并非所有链接都适合我的主导航。我被迫用max-width: 37em; overflow: hidden切断最后一个导航链接。

Answer 1

我诚实的回答是你必须处理不同的字体大小。你最好的选择是不使用min-height: 26.1em来调整内容高度，因为它是“hacky”。我建议重新构建HTML，以便UL在DIV中，底线总是匹配。

除此之外，你可以设置ul li { line-height: 1em }或类似的，这将使LI的高度始终相同。

Answer 2

我不担心。它们本质上是不同的实体，并且内容不会被修复，正如您所说，如果您点击“高级选项”，它将会扩展。我认为看起来好一点，好像它让你知道它不是一个固定的边界 这是一个想法。如果你想保持它固定，你可以将所有这些包装在容器DIV中并使用它来定义它的边框。然后在内容扩展到容器DIV外部时使用溢出滚动内容。只要它的垂直，它就不应该太麻烦了