moatextを作っていて気がついたのですが、InternetExplorer8ではCSSで指定した要素をうまく透過できない場合があります。

通常、HTML文書でCSSを使って要素を透過させると、次のようになります。

透過なし

透過あり

このように表示させるには、ブラウザ毎に対応したCSSを書く必要があります。
IEの場合は、”filter:alpha(opacity=50)”のようにします。(50は不透明度。0が完全透過。100がまったく透過しない。)
詳しくはこちら「IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック」やこちら「CSSで半透明を実現(IE,Firefox,Opera,Safari対応)」をご覧ください。

で、moatextでは文字のひとつひとつにspan要素を設定して不透明度(opacity)を設定するのですが、なぜかInternetExplorer8の標準準拠モードでspan要素の透過がうまくできません。

ちなみに標準準拠モードとは、ブラウザのHTML(CSS)の解釈方法のひとつです。
（などと偉そうに言っていますが実は今回の問題が発覚するまで、そんなものがあるとは知りませんでした。。。）
ブラウザはHTML文書の内容をみて、過去の様々な実装での表示に合わせてCSSを解釈する後方互換(quirks)モードと、CSSの規格を厳格に解釈する標準準拠(standard)モードを切り替えて使います。
（後方互換を維持しながら、標準に準拠するのは無理ということですね。たぶん両者が矛盾するケースがあるのでしょう。）
モードの切り替え方法はこちら「標準モードと互換モードについて」やこちら「標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有」をご覧ください。

話を戻して、moatextでの問題を解決するために、いろいろ実験してみたところ、次のようなことがわかりました。

１．IE8の標準準拠モードでは、ブロックレベル要素（および’display:inline-block’を指定した要素）は透過設定できるが、インライン要素は透過設定できない。
２．他のブラウザではいずれのモードでもどちらの要素も透過する。
３．IEで透過を指定した場合、子要素で”position:relative”を指定するとなぜかその要素は不透明になる（透過が適用されない）。

詳しい実験結果はこちら（画像リンクです）。

※ブロックレベル＆インライン要素については、こちら「ブロックレベル要素とインライン要素」をご覧ください。

ちなみに、moatextでは文字ひとつひとつに個別に透過などの効果を入れたいので、前後に改行の入るブロックレベル要素を使わずに、インライン要素(span)＋display:inline-block指定をしてこの問題を回避しています(version 0.3.2以降)。