ie支持CSS3標籤

讓IE6/IE7/IE8瀏覽器支持CSS3屬性

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=783

1、下載

您能夠狠狠地點擊這裏：ie-css3.htc，這個玩意兒是讓IE瀏覽器支持CSS3表現的關鍵東東。

2、上面的是什麼東西

首先說說.htc文件，.htc文件是個腳本文件，我我的覺得與js文件屬於同一貨色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才認它。htc文件能夠用來描述web行爲，web行爲容許程序員把自定義的功能「鏈接」到現有的元素和控件，而不是必須讓用戶下載二進制文件（例如ActiveX 控件）來完成這個功能。Stop! 別叉遠了，點到爲止，若是您對htc文件感興趣，能夠參見這裏。

本文的這個ie-css3.htc文件看看名字，看看長相就知道是幹嗎的了，讓IE瀏覽器支持CSS3的一些屬性。沒錯，就是經過腳本爲IE瀏覽器增長一些CSS3標準下的一些行爲（比較流行的幾種）。此htc第一段主要腳本以下：

function supportsVml() {
	if (typeof supportsVml.supported == "undefined") {
		var a = document.body.appendChild(document.createElement('div'));
		a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
		var b = a.firstChild;
		b.style.behavior = "url(#default#VML)";
		supportsVml.supported = b ? typeof b.adj == "object": true;
		a.parentNode.removeChild(a);
	}
	return supportsVml.supported
}

明白人基本上都知道，這不跟js腳本一個模子裏出來的嘛。也就是說，htc只是js腳本去韓國整了個容，換了副馬甲而已。

3、如何工做的

要說工做原理，得有一個新角色粉墨登場，那就是「VML」。VML是The Vector Markup Language(矢量可標記語言)的縮寫。VML用於將圖形數據矢量化的標記語言。這是一種基於 XML 語法的語言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML至關於IE裏面的畫筆，能實現你所想要的圖形，並且結合腳本，可讓圖形產生動態的效果。VML是微軟1999年9月附帶IE5.0發佈的……關於VML詳細知識，您能夠點擊這裏：VML百科

若是要我說的話，我以爲就是IE瀏覽器的御用畫筆，專門給IE做畫用的。因而呢IE私生子htc加上IE私有畫筆VML就能夠實現一些IE專有的圖形與表現了，正好能夠就此實現一些IE不支持的CSS3效果。

4、如何使用

使用是很容易的，看下面的示例代碼：

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari 和 Chrome */
  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */

  behavior: url(ie-css3.htc); /* 通知IE瀏覽器調用腳本做用於'box'類 */
}

能夠看到，除了最後添加了behavior這麼一句，CSS3屬性仍是那個CSS3屬性，不須要化妝、修飾或是化身爲變形金剛，這也是此方法的優勢所在。

5、問題和必要的說明

畢竟不是瀏覽器自帶的屬性，使用時遇到問題在所不免，這裏說一下一些注意事項，也能夠說是方法的侷限性吧：

1. 當前元素必定要有定位屬性，像是position:relative或是position:absolute屬性。
2. z-index值必定要比周圍元素的要高，不然……只能說抱歉了~~

6、支持的樣式及狀態說明

參見下表：

樣式	生效	無效
border-radius	爲元素四個角設置圓角屬性 元素邊框	只設置一個角落的圓角屬性
box-shadow	模糊大小參數 偏移值	不支持除了黑色(#000)之外的其餘顏色
text-shadow	模糊大小參數 偏移值 顏色值	IE下的表現與Firefox/Safari/Chrome有一點點的差別，緣由不詳