单行文字的高度问题，一直是个令人很困扰的问题！

习惯性都是哪里出现问题，哪里解决（padding, margin, line-height, height; 正的、负的等）！在不同浏览器出现不一致的情况，就用不同的HACK处理了之。

这是能解决问题的！

可是这样的情况出现多了，就会导致很多不可控的情况，特别是同段HTML，在不同的程序代码间穿插的时候，更是一种受罪。

更重要的是，作为一个前端人员，DIV＋CSS是你的主要武器之一，实在无法忍受每次都一个象素一个象素的调试，每调一次都得打开N个浏览器！

因此，花了两个小时的时间，彻底的在各个浏览器下，把line-height和height弄个清清楚楚的！

首先：注意DTD，你也可以写过度的（Transitional），但是至少得写，不然出错那就冤不得谁了。（嘿嘿…）

CSS部分：

HTML部分：

中国人的话是不什么都对呢

注：这里用了“DIV”，如果想用“SPAN”、“STRONG”等行内标签的话，需要将之转为块元素（display:block;）。行内元素是没有行高这一属性的，设了行高也不起作用！

OK，下面第一行就是各大浏览器的结果了！

上面的结果分别在两个操作系统里完成的。IE6、IE7的结果是由Windows XP里测出来的，其他的都是由Windows 7里截屏的结果。

由图片里能看出来，XP里“12px”的字高为“11”象素高，而在Win 7里看到的是“12px”。对于这个结果并不根据浏览器的不一样而不同，这个已经测过。（在上图，第三行最后一个是XP下的Firefox的字高，同样是“11px”）

上图里需要注意的是：字的上黑边线和上边的红参考线重叠了！计算的时候，是上参考线（红）到下边线（黑）之间的距离是“20px”。而第二条（每组）参考线（红）却压着字的一个象素。

由上图可以看出：

Windows 7:

Firefox、Opera、Google浏览器等，“12px”的字以12px的高居中（上下各有4象素的距离）。

而IE内核类浏览器（遨游、360、TT、IE6、IE7、IE8）却“统一”的呈现“35”状况。以12px的字高，在20px的行高里居中偏上一个象素，即上3px、下5px的！

Windows XP:

Firefox、Opera、Google浏览器等：字高11px，上4px，下5px。

IE内核（遨游、360、TT、IE6、IE7、IE8）：字高11px，上3px，下6px。

（橙色部分为推理所得）

根据上面的结果，下面有两种统一的办法：一是以非IE内核的浏览结果为准；另一个是以IE内核类的为准。

非IE内核（Firefox等）的浏览结果，需要把IE类的字向下推一个象素，但是不能用“padding、margin”等会改变容器（DIV）高度的样式，而只能用“line-height”。

因此，我将…

经过测试如下CSS能取得所要结果！

注：在IE7、IE8等内核的浏览器里，增加高度并不会把容器（DIV）的高度撑开（至少本例中没有），但IE6却会，因此给它加了个HACK，把撑出来的部分给隐藏掉！

如图第二组

还有一个办法，以IE类的为准，把非IE内核类的往上推一个象素：

总结：

以非IE类的为准，优点是上下居中，这在单行图文时最佳，虽然多了行样式－－但值得。致命点是：”overflow: hidden;“，如果你在容器（DIV）里有其他绝对定位的层时，别用！相反以IE类为准的，即没有这个问题。遗憾的是：总是差那么象素。如果想要完美，只能用其他的手段（padding、margin）解决了！