CSS 行高在各浏览器的区别

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

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

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

这是能解决问题的!

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

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

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

首先:注意DTD,你也可以写过度的(Transitional),但是至少得写,不然出错那就冤不得谁了。(嘿嘿…)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” >
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

CSS部分:
<style type=”text/css” >
.line12 {
line-height: 20px;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>

HTML部分:
<div>中国人的话是不什么都对呢</div>

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


上面的结果分别在两个操作系统里完成的。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能取得所要结果!

<style type=”text/css” >
.line12 {
line-height: 20px;
line-height: 22px9;
_overflow: hidden;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>

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

如图第二组


还有一个办法,以IE类的为准,把非IE内核类的往上推一个象素:
<style type=”text/css” >
.line12 {
line-height: 19px;
line-height: 20px9;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>

总结:

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

 

注意:需要注意的是,在各浏览器下对于line-height的解决也是有细微的区别的,上下会有1px的差别,如果行高是偶数的话,大部分浏览器解释还是比较正常,如果是奇数的话,有些浏览器会上比下多1px,而另一些浏览器会下比上多1px,对于有些要求比较严格的网站,建议行高设计时用偶数