CSS技巧

一、兼容全部瀏覽器顯示半透明效果的方法

<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");
}

二、_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;
}

三、使用min-height min-width解決div，或者span的固定高度問題

有時候咱們須要設定某個元素固定高度，可是在firefox或者opera下面只設置高度，在內容不夠多的時候，達不到預想的效果，這時候咱們能夠使用min-height

四、 使用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">

五、用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr標籤實現隱藏

六、能夠使用page-break-after，page-break-before控制打印時的分頁

七、*html{}的做用是爲了兼容6.0如下的IE版本，對html節點的選取，其餘的瀏覽器都認爲html標籤是文檔的根節點，而ie6如下的ie版本卻認爲在html標籤的上面還有一個根節點

八、使用text-indent顯示圖片，而隱藏文字

h1 {
    background: url(../img/pic.jpg) no-repeat;
    width: 200px;
    height: 200px;
    text-indent: -2000px
}