IE8 與 CSS 透明色 (opacity) (20090316更新)

wmh

請注意：IE8 從 RC1 以後已經修正了透明色的問題，透明色用法與先前的版本 IE6, IE7 相同。 以下內容僅適用於 IE8 beta 版。

這是 IE8 很奇怪的一點，在 Strict 和 Transitional 模式下，對於背景色仍是支援，但是寫法不太一樣。

先前版本的 IE 都是透過自訂的 filter 來做透明的效果，例如：

filter: alpha(opacity=30)

在 IE8 底下要改用這樣的寫法:

filter: 'alpha(opacity=30)'

多了單引號包起來就可以了。

這邊有提到要改用長的寫法：

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30)

不過我測試之後，結論就是 filter 那一串一定要用單引號包起來才有用...

但是，用單引號包起來後，在 IE6 和 IE7 卻變得無效喔，所以這時又要用到 hack 了：

filter: 'alpha(opacity=30)';
*filter: alpha(opacity=30);

加了星號的 filter 在 IE6 和 IE7 有效，且會蓋掉先前的設定，這樣就可以同時相容 IE6~8 了...


測試第一種寫法 (在 IE8 無效)

filter: alpha(opacity=30)

測試第二種寫法

filter: 'alpha(opacity=30)'; *filter: alpha(opacity=30);

測試第三種寫法 (在 IE8 無效)

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30)

測試第四種寫法

filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);

凱森

Firefox裡不支援有解嗎?

wmh

嗯，不好意思沒寫清楚。

只有 IE8 是透過 filter 去指定透明色的，其他主流瀏覽器支援  css 的透明色，可以這樣用：

opacity: 0.3; 

凱森

一樣用Hack順序是 firefox>ie8>ie雜七雜六?

wmh

Firefox 不會用到 filter 這個屬性和相關的 hack，所以不會有影響，只要同時這樣指定：

opacity: 0.3;
filter: 'alpha(opacity=30)';
*filter: alpha(opacity=30);

在幾個主流的瀏覽器都會有效。

wmh

請注意：IE8 從 RC1 以後已經修正了透明色的問題，透明色用法與先前的版本 IE6, IE7 相同。

以上內容僅適用於 IE8 beta 版。