0

如果每个平台以不同的大小呈现文本，我如何在不同的平台上获得精确的大小？最近发布的Firefox 4加剧了这个问题。此版本支持使用DirectWrite对文本进行硬件渲染。使用 DirectWrite 编写的文本的大小比没有使用硬件加速编写的文本要大得多。请注意以下示例。如果您需要查看 CSS，这是一个实时示例。

直接注销

  • Windows 7 64 位家庭版
  • ATI Radeon HD 4670
  • DirectWrite 已关闭，因为我的驱动程序未更新。
  • 620×283

直接写入

  • Windows Vista 64 位商业版
  • 英伟达 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 解决方案。font-size, width, height一种是在 px中指定所有内容 ( )。这并不理想，因为组件不会是模块化的——也就是说，它不能在缩放到另一个大小的另一个设置中重复使用。它还破坏了 IE6 的字体大小选项。另一种解决方案是使用 JavaScript 读取导航的物理高度，并使内容高度相同。这并不理想，因为样式是 CSS 的角色。有没有任何CSS解决方案？

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

4

2 回答 2

1

我诚实的回答是你必须处理不同的字体大小。您最好的选择是不要使用min-height: 26.1em“hacky”来对齐内容高度。我建议重新构建您的 HTML，以便 UL 在 DIV 内并且底线始终匹配。

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

于 2011-03-23T19:26:42.027 回答
0

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

于 2011-03-23T21:36:26.217 回答