CSS IE7 IE6 Firefox多瀏覽器安全色

來源:互聯網
上載者:User

在理想的環境中,編寫正確的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;
}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.