CSS IE7 IE6 Firefox多瀏覽器安全色

在理想的環境中，編寫正確的CSS會在支援CSS的每個瀏覽器中正常工作。不幸的是，我們並不是生活在理想的世界中，瀏覽器有不少的Bug和不一致的地方。為了建立能夠在各種瀏覽器上顯示相同樣式的頁面，CSS開發人員需要發揮創造性。通過利用 Bug(hack)和未實現的CSS，開發人員能夠選擇性地對不同瀏覽器應用不同地規則。“招數Hack”和“過濾器”是CSS開發人員地強大工具。但是，正因為功能強大，使用時應該謹慎。瞭解各種常用招數Hack以及他們地工作原理確實很重要。但是，瞭解在什麼時候應用他們以及什麼時候不應該使用也同樣重要。

在後面講陸續講這樣的一些東西。

1. 招數和過濾器之間的差異。
2. 好的過濾器和差的過濾器以及如何複責任地使用他們。
3. IE地有條件注釋。
4. 星號Html過濾器和星號、加號Html過濾器。
5. 注釋反斜線過濾器和Holly招數。
6. 反斜線過濾器和修改後地簡化框模型招數(MSBMH)。
7. !important 和底線過濾器。
8. 子過濾器和屬性過濾器

多瀏覽器安全色是一件苦力活，其實沒有什麼難度，針對不同地瀏覽器利用上面講地方法，適當地寫上不同瀏覽器支援地樣式，這樣多瀏覽器在一塊就和諧了。甚至在不同的作業系統也可以和諧共處。比如MAC和PC。要相信自己能夠戰勝這樣的困難，多瀏覽器安全色需要不停的調試，需要耐心，我以前曾寫過一個沒有利用任何Bug(Hack、!important)的CSS，也可以完美支援所有的瀏覽器，雖然一個頁面的CSS需要幾天來調試，但是這件苦力活並不是不可能完成的。其實還是一句老話，世上無難事，只怕有心人。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Hack和過濾器其實是一種迫不得已的辦法，不要稍微掌握了幾招然後就開始炫耀，到處亂寫，雖然能夠達到你的最初目的。不要到了完工的時候看一看你的CSS檔案似乎到處是Hack，到處都是補丁，似乎已經為每個瀏覽器都量身定做了一遍CSS。在使用hack和過濾器的時候其實更應該多理解CSS的標準規範，實際上要用到hack的情況是很少的。Hack本身一詞也是不包含正面意義的，而是講這是一種迫不得已的行為，是利用了不正確的瀏覽器行為。

作為一般規則，使用以來與不支援的CSS的過濾器，而不是依賴於某種瀏覽器bug的過濾器，這可能比較安全。

對比相對進階的瀏覽器應用規則和生命，同時可以確定老式的瀏覽器會平穩的退化。當瀏覽器新版本發布時候，如果它現在支援你作為過濾器使用的CSS，那麼它應該會如預期那樣工作。因為瀏覽器會越來越符合標準，如果使用比較進階的CSS克服老式瀏覽器中的問題，這個問題很有希望在新的版本中得到解決。因此，使用不支援的CSS作為過濾機制是一種相對安全的方法。之所以說“相對”是因為瀏覽器有可能支援新的CSS，但是仍然表現出你試圖修複的Bug。

因為使用依賴於解析bug的過濾器是一種有點冒險的方法。這是因為依賴於bug而不是特性。與前面的方法相似，如果解析bug被修複了，而你試圖修複的bug還沒有得到解決，那麼可能會遇到問題。但是，更嚴重的是，解析bug在瀏覽器的新版本中可能有新的表現形式。例如，假設Firefox的一個新版本有某個解析bug。如果使用這個bug作為過濾器向IE提供不同的寬度值，從而解決專用框模型的問題，那麼Firefox有可能突然繼承這個寬度，這可能會破壞許多網站的設計。

在CSS中，有許多方法可以實現同樣的效果，所以如果某些東西造成了問題，那麼可以嘗試另一種方法。許多CSS錯誤是由過分複雜的代碼和標記造成的。如果使代碼保持簡單了，那麼可以避免使用大多數招數Hack。

那麼應該使用怎樣的策略保證一個網站的CSS簡單明了，而且又能適應眾多瀏覽器呢？如果經過充分的思考，認識到只能應用某種Hack或過濾器，那麼需要以明智且受控制的方式應用它。如果CSS短小而且簡單，並且只需要應用很少幾個Hack，那麼將這些Hack放在主CSS檔案中可能是安全的。但是，Hack往往相當複雜，使代碼更加難懂。如果CSS檔案很長，或者需要使用的招數比較多，那麼最好將它們放在它們自己的樣式表中。這不但使代碼容易閱讀，而且如果Hack在新的瀏覽器中造成了什麼問題，那麼可以準確的知道它的位置。與此相似，如果決定取消對某種瀏覽器的支援，那麼只需要刪除適當的CSS檔案，就可以刪除相關聯的Hack。或者用程式判斷瀏覽器資訊，然後連結相應的CSS檔案。或者可以用條件注釋(見下一篇)。

為了協助你正確的選擇過濾器或者Hack，推薦這個網站（http://centricle.com/ref/css/filters/）。這個網站提供了表格來描述那些過濾器在那些瀏覽器中是有效，非常詳盡。

常用Hack瀏覽器匹配圖:

--------------------------------------------------------------------------------------------------------------------------------------------------------------

條件注釋:

有條件注釋是一種專門的（因為是非標準的）、對常規(X)Html注釋的Microsoft擴充。顧名思義，有條件注釋使你能夠根據條件（比如瀏覽器版本）顯示代碼塊。因為使非標準的，但是有條件注釋對於其他所有瀏覽器作為常規注釋出現，因此本質上是無害的。有條件注釋在Windows 上的IE5中首次出現，並且得到了Windows瀏覽器的所有後續版本的支援。

要想將一個特定的樣式表交給IE5、IE6、IE7或更高的版本，那麼可以在(X)Html文檔的開頭放置一下代碼:

<!--[if IE]
<style type="text/css">
@import ("ie.css");
</style>
-->

Windows上的IE5和更高版本會接收樣式表ie.css，而其他所有瀏覽器只會看到一些被注釋掉的文本。可以使用有條件注釋指定一種特定的瀏覽器，比如IE6.0

<!-- [if IE 6]
<style type="text/css">
@import ("ie60.css");
</style>
-->

還可以指定一組瀏覽器，比如IE5.5和更高的版本:

<!-- [if gte IE 5.5000]
<style type="text/css">
@import ("ie55up.css");
</style>
-->

或者IE7

<!-- [if It IE 7]
<style type="text/css">
@import ("ie70.css");
</style>
-->

這種辦法極其有效，而且非常容易記住。主要的確定是這些注釋需要放在HTML中，而不是放在CSS中。如果某一階段你希望停止支援某種瀏覽器，就需要從每個頁面中刪除注釋，當然這隻是針對靜態頁面的網站了，如果你是動態網站的話，把CSS作為可動態調用的一部分，這樣修改起來也很方便的。如果你覺得還不好，那我們下一篇再看另外一個過濾器Tantek Celik。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Tantek Celik的帶通過濾器:

Tantek Celik 基於瀏覽器解析錯誤建立了一系列過濾器(http://tantek.com/css/examples/)，允許使用@import規則將樣式表提供給選擇的瀏覽器。因為他們是CSS規則，所有這些過濾器可以放在一個CSS檔案中，這樣就可以再一個地方集中的控制過濾的檔案。將招數Hack隔離到瀏覽器特定的CSS檔案中，可以大大簡化對招數Hack的管理。如果決定停止對某一瀏覽器（比如IE 5.0）的支援，那麼只需要刪除相關的樣式表，而不需要再大量頁面代碼中進行搜尋和修改。

注意: /**/ 是CSS中的注釋格式。其實下面所說的所有過濾方法都是 /**/注釋 和 \ 轉義的混合效果。

要想將CSS檔案傳遞給 Windows 上的IE5.5 和IE5，可以使用 Tantek 的中統過濾器:

@media tty {
 i{content:”\”;/*” “*/}} @import ‘ie5x.css’; /*”;}
}

這個過濾器看起來像一堆無意義的規則，而且對於許多瀏覽器確實如此。只能理解CSS 1的瀏覽器不認識@media 規則，因此完全忽略它。能力更強的瀏覽器會看到@media 規則中的一個聲明，其目標是尋找<i>元素。由於第二個引號前面有一個逸出字元，Content 屬性的值被認為是一個無意義的字串。基本上，現代瀏覽器會看到下面這樣的規則：

@media tty {
  i { content:”Blah, blah blah”;}
}

逸出字元是一個保留字元(通常是反斜線)，它使解析器忽略後面的保留字元。所以所以，如果希望使用 CSS content 屬性自動產生一個引號，那麼必須對它進行轉義，否則它就會結束前引號：
blockquote:before {content: “\”"}

tty 媒體類型指的終端和電傳印表機。新運的使，當前沒有裝置支援這種媒體類型，所以符合標準的瀏覽器實際上會忽略整個規則。

但是，IE5.x/Windows 不理解轉移字元的，所以會提前結束內容聲明。後面的字元會結束<i> 和@media規則，這導致應用@import 規則。所有多於的字元都被注釋掉，因此再 IE 5.x/Win 看來整個規則像下面這樣:

@media tty {
  i { content:”blah” ;
       /* blah */
     }
}
@import ‘ie5x.css’
/* blah */

這非常複雜，但是幸運的是，你不需要知道這些過濾器是則怎麼工作的，只需要知道怎麼使用他們就可以了。

為了向IE 5.x/Win 的特定版本提供CSS檔案，建立了中通過濾器的兩個變體，他們利用了這些特定瀏覽器中各種Bug。這些過濾器稱為IE 5/Windows 帶通過濾器：

@media tty {
  i {content:”\”;/*” “*/}}; @import ‘ie50win.css’; {;}/*”;}
}/* */

和IE 5.5/Windows 帶通過濾器}

@media tty{
  i {content:”\”;/*” */}}@m; @import ‘ie55win.css’; /*;}
}

另一種可能希望明確指定的瀏覽器是Mac 上的IE 5.2。為此，可以使用Tantek的IE5/Mac帶通過濾器，它利用了另一個轉義Bug，這一次是在注釋中：

/*\*//*/
@import “ie5mac.css”;
/**/

IE 5/Mac 錯誤地對第二個星號進行轉義，導致應用@import 規則。因此, IE5/mac 會看到下面這樣的規則：
/* blah   */
@import “ie5mac.css”;
/**/

而其他所有瀏覽器都會正確的忽略轉義的元素，因為它放在一個注釋中，@import 規則被注釋掉了。其他所有瀏覽器都會看到下面這樣的規則（實際上就是沒有規則）

/* blah *//*
  blah
*/

與其他帶通過濾器一樣，不需要理解這個過濾器的工作原理，直接使用即可。這些過濾器的出色之處在於，他們巧妙的利用了老式瀏覽器中的Bug。因此，應該可以放心的使用他們，他們應該不會在新式的瀏覽器中造成問題。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

子選取器招數(Hack)和屬性選取器:

子選取器招數(Hack) 

最安全的過濾器依賴於未實現的CSS，而不是瀏覽器Bug。因為這些過濾器使用有效CSS選取器來應用有效聲明，所以嚴格地說，他們根本不是過濾器。他們僅僅是某些瀏覽器所不能理解的有效CSS規則。這些過濾器中的第一個稱為子選取器招數。Windows上的IE6和更低版本的IE不支援子選取器，所以可以使用它對這些瀏覽器隱藏規則。為了讓這種過濾器起到作用，必須確保在子選取器前後沒有空格。

在這個樣本中，使用子選取器招數（Hack）對IE 5-6/Win 隱藏透明的北京PNG圖象。

html>body {
   background-image:(bg.png)
}

IE7 預期會支援子選取器，還會支援PNG透明度。通過以這種方式使用子選取器，就允許IE的新版本看到透明背景，而不需要修改代碼，因而提供了向前相容性。等於ie5，i56視而不見，而IE7可以用得恰當好處，這裡並不是多瀏覽器安全色，而是向前相容。

屬性選取器招數(Hack)

另一種過濾器規則的有趣方法是使用屬性選取器。許多當前的瀏覽器（比如 Safari–Mac蘋果上的  和Firefox IE7）支援使用屬性選取器，但是IE6並不支援它。因此，可以使用屬性選取器在比較進階的瀏覽器中對類和ID應用樣式。在這個樣本中，使用屬性選取器在符合標準的瀏覽器中將背景PNG應用於內容div:

div[id="content"] {
     background=url(bg.png);
}

你可以用這些讓不同瀏覽器顯示出不同的效果，當然也可以使用它在多瀏覽器裡顯示同樣的效果。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

著名的星號* Html Hack(招數):

對於CSS當中讓IE7、IE6、Firefox相容最著名且最有用的CSS過濾器之一是星號 * Html HACK。這個過濾器非常容易記住，它可以制定IE6和更低版本。正如你知道的，Html 元素被認為是網頁上的第一個元素，即根項目。但是，IE 的所有目前的版本有一個匿名的根項目，它包圍著Html 元素。那麼這個匿名的元素或者說隱藏的元素到底是什麼元素呢？其實它就是鼎鼎大名的* 號，所以我們可以用星號來指定的規則應用於那些被星號包圍的 HTML。

IE6以及更老的IE5.5

* html {
  font-size:small;
}

在任何非ie的瀏覽器因為沒有這個規則（Html元素被*號包圍），所以其他的瀏覽器就會當作看不見，所以當你指定這個規則的時候，你可以放心的應用在IE6以及前一版本的IE5.5要展示效果中。IE 7 並沒有完全去掉這個 Hack。而是用這樣的辦法來讓過濾，那就是用 *+

IE7

*+html {
  font-size:small
}

這樣的表達，就是說除了IE7能認識這個font-size:small以外，其他的瀏覽器都不會看到這一條的，可以說這是IE7的專屬Hack。

這樣的方式可以寫在同一個CSS檔案，並且同時都會針對不同的瀏覽器產生獨特的效果。所以在設計頁面或者樣式的時候，你不妨用FireFox 來做第一瀏覽器，對照Firefox樣式寫好後，再把頁面放到IE7下看看，進行適當的調整，再放到IE6下面看看，進行適當的調整。基本上按照<div><ul><li></li></ul></ul>的順序嵌套的話，IE6根IE7的規則是差不多的。調好了IE6的樣式就等於調好了IE7的樣式，反之亦然。再者，用Firefox來寫樣式還是更符合W3C一些，因為IE6和IE7要考慮到以前的相容性，不得不在規範上做些讓步，達到相容的目的。雖然大家都很憎惡為什麼多一個Firefox，但是這是沒辦法的:(。你要掌控它而不是被它掌控了^_^。

基本上用星號搭配搞定IE6，IE7，Firefox以後，像Opera之類的瀏覽器也會正常顯示的。就不用單獨考慮他們的相容問題了。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

相容總結:

關於CSS對各個瀏覽器安全色已經是老生常談的問題了, 網路上的教程遍地都是.以下內容沒有太多新穎, 純屬個人總結, 希望能對初學者有一定的協助.多耐心的調試，肯定讓你學到不少好東西。

一、CSS HACK
以下兩種方法幾乎能解決現今所有HACK.

1, !important (不是很推薦，用下面的一種感覺最安全)

隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)

代碼:

<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77對FireFox <from 針對firefox ie6 ie7的css樣式>

*+html 與 *html 是IE特有的標籤, firefox 暫不支援.而*+html 又為 IE7特有標籤.

代碼:

<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
</style>

注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明：

代碼:

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

二、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對，

關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.

代碼:

<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他相容技巧(相當有用)

1, FF下給 div 設定 padding 後會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 置中問題.
1).垂直置中.將 line-height 設定為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
2).水平置中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標籤內內容加上 樣式, 需要設定 display: block;(常見於導航標籤)
4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5, ul 標籤在 FF 下面預設有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
7, 關於手形游標. cursor: pointer. 而hand 只適用於 IE.貼上代碼:

相容代碼:hack最推薦的模式。

/* FF */
.submitbutton {
 float:left;
 width: 40px;
 height: 57px;
 margin-top: 24px;
 margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
 margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
 margin-top: 21px;
}