透明度屬性是 CSS 中非常常用和流行的一個(gè)屬性，目前已經(jīng)廣泛被主要瀏覽器支持，可惜的是 IE6/7/8 均不支持該屬性。雖然 IE 沒有支持這個(gè) CSS 屬性，但是我們可以通過使用 IE 特有的濾鏡 filter 屬性來實(shí)現(xiàn)相同效果。
opacity: 0.4; /*Chrome、Safari、Firefox、Opera */ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6/IE7/8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* IE8 */ |
如上面代碼所示，第一行是在其他瀏覽器中使用 Opacity 屬性；第二行是 IE6/7/8 中使用濾鏡屬性設(shè)置透明度；第三行是新的 IE 濾鏡屬性，它只在 IE8 中起作用在其他瀏覽器中會(huì)被忽略，如果不是針對 IE8 設(shè)置，使用第二行代碼就可以了。參數(shù)的設(shè)置與 CSS 中 Opacity 屬性也基本相同，在 IE 濾鏡中使用 0-100 表示透明度，因此 opacity=40 相當(dāng)于 Opacity 屬性為 0.4，亦即透明度為 40%。使用該濾鏡屬性有兩個(gè)缺點(diǎn)：由于使用了 Microsoft 特有的屬性，會(huì)使得你的 CSS 非驗(yàn)證的；另外，IE 的濾鏡屬性會(huì)使得所有的 HTML 子節(jié)點(diǎn)都繼承這個(gè)屬性。
圓角效果是 CSS3 中另一個(gè)非常常用和流行的效果。它使得程序員不再需要費(fèi)力的拼裝很多圓角圖片或者使用大量復(fù)雜的 JavaScript 來實(shí)現(xiàn)的相同的效果。在很大程度上圓角屬性簡化了 HTML 代碼結(jié)構(gòu)，同時(shí)優(yōu)化了顯示效果。然而 IE 全系列瀏覽器依然不支持這個(gè)屬性。幸運(yùn)的是 Remiz Rahnas使用 VML 編寫了一個(gè) HTC 文件，為 IE 瀏覽器提供圓角效果的支持。
-moz-border-radius: 15px; /*Firefox*/ -webkit-border-radius: 15px; /*Safari、Chrome*/ border-radius: 15px; /*Opera 10.5+、IE 6+*/ behavior: url(ie-css3.htc); /* 調(diào)用腳本添加圓角效果 */ |
如上面代碼所示，圓角屬性的使用和 CSS 圓角屬性一致，只是在后面多添加了一句 behavior: url(ie-css3.htc)。behavior 屬性只被 IE 瀏覽器支持和識別，用來告訴 IE 在哪些設(shè)置了該樣式 Class 的元素上調(diào)用腳本添加圓角效果。一句簡潔的代碼就使得 IE 支持圓角效果，而不需要你額外的維護(hù)任何代碼。然而這種折中的方法也有一些缺陷：首先，在 Server 端需要引入一個(gè) HTC 文件，經(jīng)過 gzip 壓縮后對 server 端和 client 端性能應(yīng)該不會(huì)有太大的影響；其次，它會(huì)使你的 CSS 驗(yàn)證不合法；另外，這個(gè)腳本在 IE8 上有一些問題，它會(huì)使 z-index 值變成負(fù)數(shù)。因此使用時(shí)還需要小心。
盒陰影是另一個(gè) CSS3 中的很有用的屬性，它使得程序員可以通過簡單的添加一個(gè)屬性，就創(chuàng)建出一個(gè)立體效果帶有陰影的元素。在 IE 全系列瀏覽器中依然在不支持這個(gè)屬性，但 IE 為這個(gè)效果提供了濾鏡屬性；另外和上面圓角效果一樣，我們可以通過 VML 腳本來實(shí)現(xiàn)這個(gè)效果。
清單 3.Box Shadow 的濾鏡實(shí)現(xiàn)代碼
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */ -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); |
清單 4.Box Shadow 的 VML 腳本實(shí)現(xiàn)
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox */ -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ box-shadow: 2px 2px 3px #969696; /* Opera 10.5+、IE6+*/ behavior: url(ie-css3.htc); /* 調(diào)用腳本添加陰影效果 */ |
如上面代碼所示，上面兩種方法均可實(shí)現(xiàn)這個(gè)效果。但是要注意的是，IE 濾鏡效果語法與其他瀏覽器中 CSS3 屬性語法不同。因此需要開發(fā)人員仔細(xì)調(diào)試使得在不同瀏覽器中看起來有相同的效果。
文字陰影在不僅流行于打印效果中，同時(shí)也在 Web 設(shè)計(jì)中也非常流行。然而對于 Text Shadow 這個(gè)屬性我們就沒有那么好運(yùn)氣了，IE 沒有提供相應(yīng)的濾鏡效果，也沒有現(xiàn)成的 VML 腳本可以使用。在過去的 Web 開發(fā)中，我們通常使用圖片來實(shí)現(xiàn)文字陰影效果。Kilian Valkhof為了解決 IE 下實(shí)現(xiàn)文字陰影這個(gè)難題，而編寫了一個(gè) jQuery 的插件。
清單 5.IE 瀏覽器中實(shí)現(xiàn) Text Shadow 效果代碼
text-shadow: #aaa 5px 5px 8px; $(document).ready(function(){ $(".text-shadow").textShadow(); });
|
如上面代碼所示，下載了 jQuery 核心包和 Drop Shadow 插件后我們就可以在 IE 中使用文字陰影效果了。textShadow() 方法還可以填入一個(gè) JavaScript 對象參數(shù)，如下表所示：
| 屬性名 | 類型 | 默認(rèn)值 | 描述 |
| left | 整型 | 4 | 陰影距離 |
| top | 整型 | 4 | 陰影角度 |
| blur | 整型 | 2 | 陰影擴(kuò)散度 |
| opacity | 0-1 小數(shù) | 0.5 | 陰影透明度 |
| color | 顏色值 | black | 字體陰影顏色 |
| swap | 布爾 | false | 是否換行 |
CSS3 中的漸變色為漸變背景色提供了很大的方便，我們不必為了漸變的背景色使用大量細(xì)小的圖片，同時(shí)也不用為了適應(yīng)瀏覽器分辨率做很多工作。盡管 IE 瀏覽器還是不支持該屬性，我們依然可以通過 IE 是由的濾鏡屬性實(shí)現(xiàn)該效果。
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */ background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */ -ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType=0, startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */ |
如上面代碼所示，我們可以使用 IE 的私有的濾鏡來實(shí)現(xiàn)該效果。其中 GradientType 可以有兩個(gè)選項(xiàng)值 0 和 1，分別代表水平漸變和垂直漸變。startColorstr 和 endColorstr 分別代表漸變開始的顏色值和結(jié)束的顏色值。雖然參數(shù)和功能不如 CSS3 中的漸變多，但是對已一般的需求來說也算夠用了。另外該濾鏡屬性在 IE6/7 和 IE8 中支持的語法不相同，因此我們需要寫不同的代碼去做 IE6/7 和 IE8 的兼容處理。
CSS3 中提供了另一種方式設(shè)置背景透明度，那就是 RGBA 顏色。RGBA 顏色使得開發(fā)人員在指定顏色時(shí)，不僅可以指定 R、G、B 三原色的值，同時(shí)還可以指定顏色的透明度。這樣我們就就可以在瀏覽器中實(shí)現(xiàn)類似 Windows7 中一樣透明的玻璃效果，這大大增強(qiáng)了 Web 程序的視覺感官體驗(yàn)。在 IE 全系列瀏覽器中依然不支持 RGBA 顏色，我們只能利用 IE 濾鏡模擬實(shí)現(xiàn)這樣的效果。
清單 7.IE 瀏覽器 RGBA 顏色實(shí)現(xiàn)代碼
background: rgba(50, 95, 224, .4); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#886287a7', endColorstr='#886287a7'); |
如上面代碼所示，利用 IE 中漸變色濾鏡將漸變開始顏色和結(jié)束顏色設(shè)置相同，能模擬出和其他瀏覽器十分類似的 RGBA 顏色效果。另外為了在 IE 中獲得較好的透明背景效果，使用 PNG 圖片作為背景圖片也是一個(gè)很不錯(cuò)的選擇。不過這樣做的缺點(diǎn)是你不得不處理大量的圖片，同時(shí)為了適應(yīng)圖片背景不得不修改 HTML 的結(jié)構(gòu)。
圖 6.IE 瀏覽器中濾鏡實(shí)現(xiàn) RGBA 顏色效果
在最新的 Firefox 和 Webkit 瀏覽器中都對 CSS3 形變和動(dòng)畫效果做了不同程度的支持。你可以旋轉(zhuǎn)、拉伸、平移一個(gè) HTML 元素來實(shí)現(xiàn)以前只能用圖片實(shí)現(xiàn)的立體效果，也可以使用 CSS 屬性來實(shí)現(xiàn)絢麗的淡入、淡出等動(dòng)畫效果。目前 IE 全系列瀏覽器還不支持該屬性，但是很少有人知道使用 IE 的濾鏡可以實(shí)現(xiàn)簡單的 HTML 元素旋轉(zhuǎn)的效果。
清單 8.IE 瀏覽器中實(shí)現(xiàn)旋轉(zhuǎn)
-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); |
如上面代碼所示，最后一行代碼在 IE 中實(shí)現(xiàn)旋轉(zhuǎn)效果。其中的參數(shù) rotation 的選項(xiàng)為 1、2、3 和四，分別代表旋轉(zhuǎn) 90 度、180 度、270 度和 360 度。和 CSS3 中的旋轉(zhuǎn) 360 度功能相比，IE 中的旋轉(zhuǎn)濾鏡功能就顯得十分有限了，每次 90 度的旋轉(zhuǎn)很難滿足開發(fā)人員的需求。
另外 dojo 在 1.5 版本對 CSS3 中的 transform 屬性開始有一定的支持，其中包括了 matrix、rotate、skew、scale、translate 等功能。如果有 CSS3 形變需求的話，可以參考使用 dojo 對這部分功能的擴(kuò)展。
清單 9. 使用 dojo 設(shè)置 HTML 元素旋轉(zhuǎn)
dojox.html.ext-dojo.style("transform","rotate(10deg)");
|
圖 7.IE 瀏覽器中濾鏡實(shí)現(xiàn) HTML 元素旋轉(zhuǎn)
CSS3 雖然還沒有正式發(fā)布，但是各個(gè)瀏覽器廠商已經(jīng)開始部分支持這些新特性了。這些新特性的支持給我來帶了很多驚喜，使我們很容易實(shí)現(xiàn)我們意想不到的華麗的效果，簡化了很多前端實(shí)現(xiàn)的代碼。但是 CSS3 也給我們帶來了很多困擾，各個(gè)瀏覽器廠商對 CSS3 標(biāo)準(zhǔn)支持不一致，尤其是特立獨(dú)行的 IE 給開發(fā)人員帶來更多的麻煩。為了實(shí)現(xiàn) Web 程序的跨瀏覽器和顯示的一致性，我們不得不花費(fèi)很多時(shí)間在各個(gè)瀏覽器差異的調(diào)試上。本文針對部分 IE 不支持的 CSS3 效果以及在 IE 瀏覽器上的替代方案做了詳細(xì)的介紹。希望能為廣大開發(fā)者在未來的開發(fā)工作中提供一點(diǎn)啟示。