CSS Hack及經常使用的技巧

時間 2020-05-29

標籤 css hack 經常使用技巧欄目 CSS 简体版

原文原文鏈接

何謂CSS Hack？

不一樣的瀏覽器，好比Internet Explorer 六、Internet Explorer 七、 Mozilla Firefox對CSS的解析認識不同，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。此時咱們須要針對不一樣的瀏覽器寫不一樣的CSS，讓它可以兼容不一樣的瀏覽器，可以在不一樣的瀏覽器中獲得咱們想要的頁面效果。針對不一樣瀏覽器編寫不一樣CSS code的過程就叫CSS Hack，或叫寫CSS Hack。html

不一樣瀏覽器對CSS解析的差異以下：瀏覽器

!important能被IE七、FF識別，但不能被IE6識別
IE6支持"*" or "_"開頭的CSS，IE7支持"*"開頭的CSS，但不支持"_"開頭的CSS，FF二者都不支持
"+"開頭的CSS樣式僅能被IE7識別
"\0"結束的CSS樣式僅能被IE8識別
"\9"的CSS樣式能被IE識別

【書寫順序：針對FF的樣式放在最前面，針對IE7的樣式放在中間，針對IE6的樣式放在最後】

1. !importantspa

!important 指定樣式應用規則的優先權，區別IE6與IE7，區別IE6與其它瀏覽器。firefox

.browserTest
{
border: 20px solid #60A179 !important;
border: 20px solid #00F;

} code

IE7和其它標準瀏覽器能識別!important，顯示#60A179顏色，IE6不能識別!important，顯示#00F顏色。htm

2. *blog

IE都能識別"*"，標準瀏覽器（如FF）不能識別"*"。it

區別IE與FF：io

.browserTest

{ border:20px solid #60A179; class

*border:20px solid #00F;

}

區別IE六、IE七、FF：

.browserTest
{
    border: 20px solid #60A179;
    border: 20px solid #00F !important;
    *border: 20px solid #fff;

}

3. _

IE6支持"_"，IE7和FF都不支持"_" 。區別IE六、IE七、FF：

.bowserTest {

border:20px solid #60A179;

*border:20px solid #00F;

_border:20px solid #fff;

}

4. *+html 與 *html

*+html 與 *html 是IE特有的標籤， firefox 暫不支持。而*+html 又爲 IE7特有標籤

.browserTest { width: 120px; } /* FireFox fixed */
*html .browserTest { width: 80px;} /* ie6 fixed */
*+html .browserTest { width: 60px;} /* ie7 fixed */

*+html 對IE7的HACK 必須保證HTML頂部有以下聲明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">