[Hacks] HTML 條件式

說真的, IE 這傢伙真是讓人又愛又恨,嗯!做網頁的人,應該恨比愛多得多吧!一堆好的新的功能不支援,還要搞一堆自己才能用的東西,真是讓人傷透腦,是吧!
我想這個情形大概只有大家都不用 IE(我想不太可能吧!),或是都改用 IE8.0 我想問題會少很多吧!至少這個 IE8.0 看起來,是大家公認的「先進瀏覽器」之一了。
看了上述的說明,我想大概就會知道,為什麼要使用 IE 專用的 html Hacks了吧。
好了,癈話不多說,這個 IE 專用的 html Hacks,其實只是運用 html 裡常用來做為程式的註解長得像這樣 <!-- -->,只要在裡面加上一些只有 IE 自己才認得的特殊語法,也因為只有它自己才看得懂,所以反而將註解裡的內容以為是有效語法(是笨還是聰明啊!),甚至還可以利用一些判斷的方法讓它自動判別不同 IE 的版本,再利用可以自己判別不同 IE 版本或者是不是 IE 瀏覽器的功能將不同的內容(例如:CSS or 其他內容)作用在不同的 IE 裡,而其它不是 IE 的瀏覽器(例如:Opera , FireFox , Safari…等)就會因為只會把它當做是一般的網頁註解,當然也就不會理會它啦,這樣就有了區隔不同 IE 版本或者是其他瀏覽器的另類功能囉!

我把所有條件列在下方,我有翻中文,但還是保留原始的英文說明,怕我翻譯的大家看不懂。
IE
只有 IE 才有效(Any version of IE)
lt IE version
比指定的版本還小才有效(Versions less than version)
lte IE version
版本小於或等於都有效(Versions less than or equal to version)
IE version
只有指定的版本才有效(Only version version)
gte IE version
版本大於或等於都有效(Versions greater than or equal to version)
gt IE version
比指定的版本還大才有效(Versions greater than version)

上面語法中使用的 gte or lte or IE 其實是一種條件,再配合 if 就可以請 IE 判斷自己的版本,根據結果,我們再配合預設的語法,就可以讓不同的語法或程式,自動的在不同的 IE 裡作用囉!

範例寫法:

<!--[if IE]>這裡可以放入你要的 html 內容<![endif]-->
只要是 ie 就有效(不分版本)


<!--[if lt IE 8]>這裡可以放入你要的 html 內容<![endif]-->
比 ie8 版本還小才有效


<!--[if lte IE 6]>這裡可以放入你要的 html 內容<![endif]-->
版本小於 ie6 或等於 ie6 都有效


<!--[if IE 6]>這裡可以放入你要的 html 內容<![endif]-->
只有 ie6 才有效


<!--[if gte IE 7]><!-->這裡可以放入你要的 html 內容<!--<![endif]-->
版本大於 ie7 或等於 ie7 都有效


<!--[if gt IE 7]><!-->這裡可以放入你要的 html 內容<!--<![endif]-->
比 ie7 的版本還大才有效

你還可以配合"!"符號的使用,"!"在寫程式是代表了邏輯 NOT的意思,也就是負責把黑的變白的,True 變 False。

<!--[if !(IE 7)]>這裡可以放入你要的 html 內容<![endif]-->
只有 ie 有效但不包括 ie7


<!--[if !IE]>-->這裡可以放入你要的 html 內容<!--<![endif]-->
ie 以外有效(只有IE沒有作用),也就是 Opera , FireFox , Safari...等都有效果

以上實際應用如下

<!--[if lt IE 7]>
<script src="IE7.js" type="text/javascript"></script>
<![endif]-->


<!--[if !(IE 8)]>
<script src="IE7.js" type="text/javascript"></script>
<![endif]-->

以上二種寫法都是指 IE7 以下才去連結 IE7.js 這個檔案,而什麼是 IE7.js,你可以參考這一篇,這是一個可以把 IE7 以下的版本,通通藉由這個 IE7.js 修正成跟 IE7 一模一樣的方式,包括了 CSS 以及 html 和其它一切的行為,更詳細可以參考這一篇

更詳細的說明及引用位置
- http://www.webdevout.net/
- http://centricle.com/ref/css/filters/
- http://www.webdevout.net/

1 Comments:

匿名 提到...

這裡可以放入你要的 html 內容

以上內容有誤,對於非ie瀏覽器有效的正確語法如下:
-->這裡可以放入你要的 html 內容

 
© 2008 Blogger Template Layout Design by [ Fanchie AirHead ]