css line-height属性的使用技巧

2024-07-11 08:30:42

字体：大中小

来源：转载

供稿：网友

css中用于设置行高的属性，line-height属性。

第一，对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浏览器，就必须要再次声明，才能生效。

例子：
1，html代码

复制代码

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

2，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;
1，CSS代码：

上一篇：CSS中filter滤镜的学习笔记(静态滤镜及动态滤镜)

下一篇：纯css写的评分鼠标移入的效果附图