CSSで要素を透過させるopacityの挙動について、ブラウザ毎に調べてみた

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

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

透過なし

BitMeister

透過あり

BitMeister


このように表示させるには、ブラウザ毎に対応した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での問題を解決するために、いろいろ実験してみたところ、次のようなことがわかりました。

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

詳しい実験結果はこちら(画像リンクです)。
Opacity実験結果
※ブロックレベル&インライン要素については、こちら「ブロックレベル要素とインライン要素」をご覧ください。

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

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrEmail this to someonePrint this page

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*