4

问题：

最好在使用 H2 元素时进行描述。当这个元素的高度是你设计的关键时，你会遇到一个巨大的问题。多个设备上的高度不同，因此真的会搞砸您的设计。

如下图所示。问号旁边的黑色空间显示了移动 safari 上出现的不需要的“额外空间”。

在此处输入图像描述

自己试试

我找到了一种您可以自己测试的方法。只需在不同的设备上打开此链接，您就会发现实际高度与完全相同的代码段不同。

http://jsfiddle.net/RwPk7/40/

研究

 - MAC Chrome  : 18px 
 - MAC Safari  : 18px
 - MAC Firefox : 17px
 - iPad        : 20px
 - iPhone      : 20px
 - Android     : 19px
 - WIN Chrome  : 18px
 - WIN IE      : 18px

可能的答案

font-size: 13px; 
line-height: 1.231; // Borrowed from HTML5 Boilerplate

http://jsfiddle.net/RwPk7/45/

4

1 回答 1

-1

似乎是在 Mobile Safari 中如何实现粗体文本的问题。这似乎在没有粗体文​​本的两种浏览器中都有效：http: //jsfiddle.net/RwPk7/23/

但是，粗体文本在每种情况下呈现在不同的高度，再加上浏览器默认将文本垂直居中到行高的事实使得简单的通用解决方案变得困难。

因此，如果您可以不使用粗体文本，这应该没问题。

于 2012-09-04T15:44:19.340 回答