不同平台上的文字大小不同
如果每个平台以不同的尺寸呈现文本，如何在不同的平台上获得精确的尺寸？最近发布的 Firefox 4 加剧了这个问题。此版本支持使用 DirectWrite 进行文本硬件渲染。使用 DirectWrite 写入的文本大小比不使用硬件加速写入的文本大得多。请注意以下示例。如果您需要查看，这里是实时示例 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 为单位指定所有内容（字体大小、宽度、高度）。这并不理想，因为该组件不是模块化的 - 也就是说，它不能在缩放到另一个尺寸的另一个设置中重复使用。它还破坏了 IE6 的字体大小选项。另一种解决方案是使用 JavaScript 读取导航的物理高度并使内容高度相同。这并不理想，因为样式是 CSS 的角色。有没有CSS解决方案？
这只是众多例子之一。另一个问题是 Ubuntu 9 上的 Firefox 3 具有更宽的文本，因此并非所有链接都适合我的主导航。我被迫用 max-width: 37em; 砍掉最后一个导航链接；溢出：隐藏。
How do I get precise sizing on different platforms, if each platform renders text at a different size? This issue was exacerbated with the recent release of Firefox 4. This version enables hardware rendering of text using DirectWrite. The size of the text written with DirectWrite is much taller than text written with no hardware acceleration. Note the following example. Here's the live example if you need to see the
CSS.
- Windows 7 64-bit Home
- ATI Radeon HD 4670
- DirectWrite is off because my drivers are not updated.
- 620 x 283
- Windows Vista 64-bit Business
- nVidia GeForce 8800GT
- DirectWrite is on because I just updated my drivers.
- 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;
}
Do you see how the navigation lines up with the content when DirectWrite is off, but the navigation is taller than the content when DirectWrite is on? I know there are some hacky solutions. One is to specify everything (font-size, width, height) in px. This is not ideal because the component will not be modular - that is, it can't be re-used in another setting scaled to another size. It also breaks IE6's font size options. Another solution is to use JavaScript to read the physical height of the navigation and make the content the same height. This is not ideal because it is CSS's role to style. Is there any CSS solution for this?
This is just one of many examples. Another is Firefox 3 on Ubuntu 9 has much wider text, so not all links fit in my primary navigation. I was forced to chop off the last navigation link with max-width: 37em; overflow: hidden.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我诚实的回答是你必须处理不同的字体大小。最好的选择是不要使用
min-height: 26.1em来对齐 content-height，因为它是“hacky”。我建议重新构建 HTML，使 UL 位于 DIV 内，并且底线始终匹配。除此之外，您可以设置 ul li { line-height: 1em } 或类似的设置，这将使 LI 始终具有相同的高度。
My honest answer is that you have to deal with different font sizes. Your best bet is to not align the content-height using
min-height: 26.1emas it's "hacky". I'd suggest re-structuring your HTML so that the UL is inside the DIV and the bottom line always matches.Short of that, you can set
ul li { line-height: 1em }or similar which will make the LIs always the same height.我不会担心这个。它们本质上是不同的实体，内容无论如何都不是固定的，正如您所说，如果您点击“高级选项”，它会扩展。我认为稍微超出一点看起来很好，就好像它让你知道它不是一个固定的边界。
这是一个想法。如果您想保持它固定，您可以将所有内容包装在容器 DIV 内，并使用它来定义其边框。然后，当内容扩展到容器 DIV 之外时，对内容使用溢出滚动。只要是垂直的，就不会有太大麻烦
I wouldn't worry about it. They are essentially different entities and the content isn't fixed anyway, as you said it will expand if you hit "Advanced Options". I think it looks fine going a tad over, as if its letting you know its not a fixed boundary.
Here's an idea. If you wanted to keep it fixed, you can wrap all of that inside a container DIV and use that to define it's borders. Then use overflow scrolling with the content when it expands outside of the container DIV. As long as its vertical, it shouldn't be too much of a bother