bop日記
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
昨日のエントリーでiepngfix.jsを使った～と言っていましたが、コーディングを進めていくうちに難題が発生。
正確にはiepngfix.jsではなくAlphaImageLoaderの方の不具合なんですが、AlphaImageLoaderを適用したブロック要素が内包するaタグが動作しなくなるっていう（；´д｀）
原因はどうやらAlphaImageLoaderの仕様にあって、ブロック要素の上から被せるようにPNG画像をレンダリングするため、そのブロック要素が内包するaタグがクリック出来なくなる（当然:hover擬似クラスも無効）ようです。
つまり解決策としては、AlphaImageLoaderを適用したブロック要素よりも、内包されるa要素の方が、重なり合い上で前面に来ればいい、ということになります。
即ち、
a{position:relative;}
これで解決。
ただし、これには落とし穴が。
AlphaImageLoaderを適用しているブロック要素を絶対配置していた場合、これではa要素が前面に出てきてくれません。（当然ですね）
ならばa要素を絶対配置にして、z-indexで……となるのですが……ここで思い出すべきは「問題になっているブラウザがIE6である」ということ。
実は、IEのz-indexの解釈は独自です。（またかよMicrosoft）
通常、絶対配置された要素は全て同一のレイヤーに置かれ、z-indexによってその重なり順を制御されます。
しかしIEは「文書構造上同一階層にある要素同士の重なり順を制御し、それ以外は階層順に描画する」となっているようです。
どういうことかというと？
<h1 style="z-index:10;"></h1>
<div>
<p style="z-index:20;"></p>
</div>
このソースだと、本来ならp要素が一番上に来て、その下にh1要素が来ます。
しかしIEだと、こういう解釈になります。
1.h1のz-indexが10であるため、z-indexを指定していないdivの上にh1が乗る。
2.内包するp要素もろともdivがh1の下に入っているため、pはh1の下に隠れる。
3.divはpの上位階層であるため、どんなにz-indexの値を上げようが親要素を超えることが出来ない。
これがweb標準だお！（｀・ω・´）(ｷﾘｯ
ふざけるなー！（゜д゜）
つまり、AlphaImageLoaderを適用したブロック要素を絶対配置した時点で、その子要素であるa要素は、どんなに頑張っても親要素以上前に配置されないのです。
うがー！
大体、完全に飾り目的ならいざ知らず、大体の場合はa要素を含むじゃないですか。
この不具合を回避するには、また装飾用の空divを置くことになるんですよ。
そんなソース嫌だ。
で、気分萎え萎えで探していたら、こんなの見つけました。
DD_belatedPNG.js
これはiepngfix.jsやie7.js・ie8.js、IE PNG FIX2などと違って、描画にAlphaImageLoaderを利用していません。
背景画像にも使えるし、background-repeatやbackground-positionも有効だとの事。
おまけに内包するa要素がクリック出来なくなるという問題が発生しないんだとか。
こ……これは……来たかも知れん。
使い方としては本体をダウンロードしてきて、headにscriptで読み込んであげます。
しかしこのままでは全部のブラウザで動作してしまうので、IE6だけ振り分けてあげませう。
最後に関数を書いて、適用させたいセレクタを引数で渡してあげればOK。
こんな感じ↓
<head>
<!--[if IE 6]>
<script type="text/javascript" src="[path]/DD_belatedPNG.js></script>
<script type~"text/javascript">
DD_belatedPNG.fix('tag,#id,.class');
</script>
<![endif]-->
</head>
二個目のscriptタグの中身が適用させるセレクタを設定する関数で、タグもIDもclassも扱えます。
指定の仕方はCSSと同じでOK。
これだけで、IE6に透過PNGが表示されます。
やほーい！
で、色々試していたんですが、不具合もないわけではないです。
作者さまのサイト（もちろん英語OTL）を読んでも書いてなかったんですが、ul要素を指定すると動作がおかしくなりました。
具体的には、PNG画像を背景に指定したul要素を絶対配置すると、その時点で位置が左上に固定され、以後どれだけtopやleftをいじっても、そこからテコでも動いてくれませんでした。
しかもなぜか、子要素であるli要素は正しい位置で表示されているという……何だコレ？（゜д゜）
とりあえず、PNG画像を貼らなければ動作はおかしくならないようなので（作者サイトによると、.pngで終わる文字列を要素ごとに正規表現によるマッチングを行っているようです）、装飾目的のdiv要素を配置することで何とか同じ見た目を維持しましたが……うーむ。
結論としては、ぜんぶMicrosoftｆがわるい。
正確にはiepngfix.jsではなくAlphaImageLoaderの方の不具合なんですが、AlphaImageLoaderを適用したブロック要素が内包するaタグが動作しなくなるっていう（；´д｀）
原因はどうやらAlphaImageLoaderの仕様にあって、ブロック要素の上から被せるようにPNG画像をレンダリングするため、そのブロック要素が内包するaタグがクリック出来なくなる（当然:hover擬似クラスも無効）ようです。
つまり解決策としては、AlphaImageLoaderを適用したブロック要素よりも、内包されるa要素の方が、重なり合い上で前面に来ればいい、ということになります。
即ち、
a{position:relative;}
これで解決。
ただし、これには落とし穴が。
AlphaImageLoaderを適用しているブロック要素を絶対配置していた場合、これではa要素が前面に出てきてくれません。（当然ですね）
ならばa要素を絶対配置にして、z-indexで……となるのですが……ここで思い出すべきは「問題になっているブラウザがIE6である」ということ。
実は、IEのz-indexの解釈は独自です。（またかよMicrosoft）
通常、絶対配置された要素は全て同一のレイヤーに置かれ、z-indexによってその重なり順を制御されます。
しかしIEは「文書構造上同一階層にある要素同士の重なり順を制御し、それ以外は階層順に描画する」となっているようです。
どういうことかというと？
<h1 style="z-index:10;"></h1>
<div>
<p style="z-index:20;"></p>
</div>
このソースだと、本来ならp要素が一番上に来て、その下にh1要素が来ます。
しかしIEだと、こういう解釈になります。
1.h1のz-indexが10であるため、z-indexを指定していないdivの上にh1が乗る。
2.内包するp要素もろともdivがh1の下に入っているため、pはh1の下に隠れる。
3.divはpの上位階層であるため、どんなにz-indexの値を上げようが親要素を超えることが出来ない。
これがweb標準だお！（｀・ω・´）(ｷﾘｯ
ふざけるなー！（゜д゜）
つまり、AlphaImageLoaderを適用したブロック要素を絶対配置した時点で、その子要素であるa要素は、どんなに頑張っても親要素以上前に配置されないのです。
うがー！
大体、完全に飾り目的ならいざ知らず、大体の場合はa要素を含むじゃないですか。
この不具合を回避するには、また装飾用の空divを置くことになるんですよ。
そんなソース嫌だ。
で、気分萎え萎えで探していたら、こんなの見つけました。
DD_belatedPNG.js
これはiepngfix.jsやie7.js・ie8.js、IE PNG FIX2などと違って、描画にAlphaImageLoaderを利用していません。
背景画像にも使えるし、background-repeatやbackground-positionも有効だとの事。
おまけに内包するa要素がクリック出来なくなるという問題が発生しないんだとか。
こ……これは……来たかも知れん。
使い方としては本体をダウンロードしてきて、headにscriptで読み込んであげます。
しかしこのままでは全部のブラウザで動作してしまうので、IE6だけ振り分けてあげませう。
最後に関数を書いて、適用させたいセレクタを引数で渡してあげればOK。
こんな感じ↓
<head>
<!--[if IE 6]>
<script type="text/javascript" src="[path]/DD_belatedPNG.js></script>
<script type~"text/javascript">
DD_belatedPNG.fix('tag,#id,.class');
</script>
<![endif]-->
</head>
二個目のscriptタグの中身が適用させるセレクタを設定する関数で、タグもIDもclassも扱えます。
指定の仕方はCSSと同じでOK。
これだけで、IE6に透過PNGが表示されます。
やほーい！
で、色々試していたんですが、不具合もないわけではないです。
作者さまのサイト（もちろん英語OTL）を読んでも書いてなかったんですが、ul要素を指定すると動作がおかしくなりました。
具体的には、PNG画像を背景に指定したul要素を絶対配置すると、その時点で位置が左上に固定され、以後どれだけtopやleftをいじっても、そこからテコでも動いてくれませんでした。
しかもなぜか、子要素であるli要素は正しい位置で表示されているという……何だコレ？（゜д゜）
とりあえず、PNG画像を貼らなければ動作はおかしくならないようなので（作者サイトによると、.pngで終わる文字列を要素ごとに正規表現によるマッチングを行っているようです）、装飾目的のdiv要素を配置することで何とか同じ見た目を維持しましたが……うーむ。
結論としては、ぜんぶMicrosoftｆがわるい。
PR
