1

我有以下标记：

<div class="blockSection">
<h5>Title of the section</h5>
...
</div>

现在，.blockSection 的 h5 有一个固定的高度和一个 40 像素的背景图像。为了垂直对齐文本，我总是将行高设置为与高度相同，因为文本不会分成 2 行或更多行。但问题是我使用的是带有 font-face 的字体，我不想在 Firefox、Mac 上的 Safari 中垂直对齐。在 windows IE 中看起来不错。

任何人都知道在不为浏览器应用不同 line-height 的情况下使其正确的技巧吗？

4

3 回答 3

3

你可能只是运气不好......除了针对浏览器和操作系统的不同组合的黑客攻击之外。

“没有理想的行高适用于所有 Web 字体。每种字体都需要不同的默认行高，具体取决于其设计质量——无论是压缩还是宽，字母间距是紧还是松，是上升还是上升与 x 高度等相比，下降器长或短。” - Webfonts.info

如果您从 Webfonts 获得字体许可，他们有一个工具包生成器，可以让您摆弄行高选项。“边界框”适用于我在那里的一种字体。更多信息在这里：http ://webfonts.info//webfonts-know-how/part-3-line-height-options-kitbuilder

另一个比条件样式表更好的选项，因为字体可能在浏览器和操作系统中呈现不同，你可以试试这个 jQuery 插件，它使你能够检测浏览器和操作系统的组合，然后对其应用一个类。不理想，但它是一种选择。

http://www.icavia.com/2010/09/solving-font-face-alignment-issues/

更新：另一个尝试的选择是Font Squirrel Webfont Generator。如果您有权使用相关字体，请在专家模式下使用此生成器并确保选中“修复垂直度量”选项。

于 2012-10-25T18:25:12.167 回答
1

垂直居中的一种解决方案（在非 IE 浏览器中）是display: table-cell在vertical-align: middle您的h5.

于 2010-07-21T13:16:12.973 回答
0

听起来有条件的评论可以解决问题。在一个 line-height 内创建一个仅 IE 样式表，并为其他浏览器创建一个 line-height 的主样式表。

我知道你不想为不同的浏览器设置不同的行高，但如果 IE 正在做你想做的事情而其他浏览器没有，这是最好的解决方案。

于 2010-07-21T13:09:13.767 回答