手工SEO

手工SEO首页 DEDE教程 正文

CSS属性line-height新解

手工SEO 2020-03-08 16:01:26 DEDE教程 181℃ 手工SEO

在做wap新站时候使用了很多html5和CSS3的属性,经测试,一般标准的浏览器(包括PC端的和手机客户端浏览器)都是兼容的比较好,
惟独发现Opera Mobile手机浏览器(也就是国内的欧朋浏览器)对CSS3兼容的不太好。我测试的是最新版本7.2.2。而且,我发现,不只是对CSS3不支持,而且对line-height的属性的解析与其他浏览器也是不相同的。
虽然,Opera的新版手机浏览器马上就要发布了,这是Opera的第一款基于Webkit的手机客户端浏览器。显然,这是个好消息,尤其对于做前端的我们,webkit家族的壮大,就意味着我们在测试兼容性的考虑范围缩小,工作量会相应的减少。
不过,我觉得还是有必要搞清楚这个情况,下面我简单总结一下对其的新认识。

第一,对CSS3的选择器和类似header、nav、footer等标签不兼容,在不使用插件和JS处理的情况下,从纯CSS的角度来切入,我们可以采用类名来做定义,这是常用的替代方案。我的项目中,针对元素背景不支持颜色渐变的情况,折中的方案是给其一个最合适的背景色,这样使得背景色和文字颜色能有个基本的对比和区分,不至于影响用户的阅读和正常浏览。

例如:

header.sub-hd{  position:relative;  height:40px;  background-image:-moz-linear-gradient(top, #13b9fd, #0183c3);  background-image:-o-linear-gradient(top, #13b9fd, #0183c3);  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#13b9fd),color-stop(1,#0183c3));  box-shadow:inset 0 1px 4px #6cd5ff;  -moz-box-shadow:inset 0 1px 4px #6cd5ff;  -webkit-box-shadow:inset 0 1px 4px #6cd5ff;  text-align:center;  font-size:15px; background-color:#099ddf;/*opera mobile不支持渐变的折中方案*/ }



针对IE6不识别html5标签的方法

<script> (function(){     var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;     while(i--){         document.createElement(e[i]);     } })(); </script>


第二,我们经常使用line-height属性,定义行高,尤其是需要设置垂直居中的时候,常常让height属性与line-height属性相同。而且其是可以继承的,一篇文章的父标签定义了行高属性,其子段落元素就不需要再次进行声明。可是,也有例外的情况。比如在Opera Mobile浏览器,就必须要再次声明,才能生效。


下面看例子:
html代码

<div class="test"><h2>测试标题在Opera Mobile下的宽高</h2></div>


CSS代码

<style> .test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;} .test h2{border:1px solid red;} </style>


从手机上看页面效果:不居中!!!
通过观察红色边框大小,知道内标签h2的呈现高度与实际呈现的line-height一致,都不是我们父div定义的数值。

然后,我们给h2加上line-height属性值,可以设置为line-height:inherit或者line-height:40px;
CSS代码:

<style> .test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;} .test h2{line-height:inherit;border:1px solid red;} </style>


查看效果,竟然没有变化,依然没有垂直居中。这是为什么呢?
想起以前看的一篇介绍浏览器机制的文章,莫非是浏览器自身默认的属性优先级高过了当前的属性优先级。我们更改一下优先级试试:

<style> .test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;} .test h2{line-height:inherit!important;border:1px solid red;} </style>


再看,果然可以了。垂直居中了。
由此我们页可以印证另一种说法:对于一个空容器,写入内容容器被撑开有了高度宽度,但实际上根本不是文字撑开了div的高度,而是line-height属性。
CSS中起高度作用的主要是height以及line-height了吧!如果一个标签没有定义height属性(包括百分比高度),那么其最终表现的高度一定是由line-height起作用,即使是IE6下11像素左右默认高度bug也是如此。

至于内部的机理,看这里很形象的表述:

到底这个line-height行高怎么就产生了高度呢?在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes罩着你;但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计五个line boxes。line boxes什么特性也没有,就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

其实line boxes不是直接的生产者,属于中层干部,真正的活儿都是它的手下 – inline boxes干的,这些手下就是文字啦,图片啊,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。例如,<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。则line boxes的高度就是40像素了。

虽然所有浏览器都支持 line-height 属性。但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。因此在实际中,我们最好还是用数值定义line-height
在本例中即为

<style> .test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;} .test h2{line-height:40px!important;border:1px solid red;} </style>

上一篇:你需要知道的三个 CSS 技巧

下一篇:textarea属性设置详解

网站分类
标签列表