1、兼容所有浏览器显示半透明效果的方法
<div class="transparent"></div>
.transparent {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: .5;
width: 200px;
height: 200px;
margin: 0 auto;
background: url("../img/pic.jpg");
}
2、_height
,_width
的作用
使用_height
解决float
的div
不闭合的问题,可以将_height
属性去掉就可以达到效果。
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
#wrap {
border: 6px solid #ccc;
overflow: auto;
_height: 1%;
}
.column_left {
width: 20%;
padding: 10px;
float: left;
}
.column_right {
float: right;
width: 75%;
padding: 10px;
border-left: 6px solid #ccc;
}
3、使用min-height
min-width
解决div
,或者span
的固定高度问题
有时候我们需要设定某个元素固定高度,但是在firefox
或者opera
下面只设置高度,在内容不够多的时候,达不到预想的效果,这时候我们可以使用min-height
4、 使用media
指令引入两种css
:打印版本的css
和屏幕显示的css
<link type="text/css" rel="stylesheet" href="url" media="screen" charset="utf-8">
<link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8">
5、用.fixTable{ table-layout: fixed; overflow:hidden; }
加上nobr
标签实现隐藏
6、可以使用page-break-after
,page-break-before
控制打印时的分页
7、*html{}
的作用是为了兼容6.0以下的IE版本,对html
节点的选取,其他的浏览器都认为html
标签是文档的根节点,而ie6以下的ie版本却认为在html
标签的上面还有一个根节点
8、使用text-indent
显示图片,而隐藏文字
h1 {
background: url(../img/pic.jpg) no-repeat;
width: 200px;
height: 200px;
text-indent: -2000px
}