[CSS] Opacity in Mozilla and IE

最近在玩CSS語法中的opacity(不透明度)屬性，發現在Browser之間的相容性有很大的問題...囧rz，真是煩人的問題，W3C的標準似乎是以"opacity: 0~1"即可，但是在Internet Explorer 6/7 之中似乎要用 "filter: alpha(opacity=0~100)"才行，而Firefox雖有支援標準，但好像也有自家定義的"-moz-opacity: 0~1"...真是一大堆無意義的東東。

知道了以上三種CSS語法，但是真正在改我的Blog時，卻還是遇到「Firefox works, IE sucks」的問題...心頭浮現出無限多個...囧囧囧...真想揍人，偏偏IE的占有率還是比較高的，為了讓Blog展現出來的效果能夠一致，還是得想辦法弄好這個鳥問題：「在 :hover 的處理上， IE 要在滑鼠移到文字上面時，才會觸發 :hover 運作，而 mozilla firefox 只要移到設定 :hover 的 element 上面，還沒有碰到文字，就可以觸發 :hover 的 CSS 變化。」

於是就去問了一下孤狗大神，孤到了底下這篇好文，寫得很棒...解決了我的問題。

• Mandarin Design: CSS Opacity and Transparency
  

解決方法大致上如下，作者有講到如此一來，IE、Fx、Opera都可以work囉 ^_^，主要就是利用onmouseover的屬性，解決IE中「:hover」的問題，只要在想要產生透明化效果的tag裡頭動些手腳即可 ^^，快往下看吧：

．text/css code：
.transOFF {width: 100%; opacity:1;filter: alpha( opacity=100 ); -moz-opacity: 1;}
.trans25 {width: 100%; opacity:.25;filter: alpha( opacity=25 ); -moz-opacity: 0.25;}
.transON {width: 100%; opacity:.50;filter: alpha( opacity=50 ); -moz-opacity: 0.5;}
.trans75 {width: 100%; opacity:.75;filter: alpha( opacity=75 ); -moz-opacity: 0.75;}

．html code：

<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'">
<p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE. It also works in current versions of Opera.</p></div>

※注意上頭的「width: 100%;」，發現若這行沒加的話 ->「IE sucks again」...囧rz，透明效果便又無作用。

還有「html>body」這個"child selector"，原本的用意是在IE 6中隱藏CSS定義，也就是Non-IE的Browser都可以認得，IE 6自動 skip，But...在 IE 7好像已經支援了，所以...令人感覺非常 suck... Orz