bop日記
[1]
[2]
×
[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
ブログの更新を忘れていた、んぼです。
さいきんわすれっぽいのです。
さてさて、コーディングアヒャーな日々なわけですが、仕事上どうしてもpngファイル使わないといけない場面が出てきました（まあ無理矢理jpgでもいけなくもないんですが）。
ご存知の通り、透過PNGはIE6では未対応です。
IE8が出てきて久しい昨今ですが、まだIE6を使っている人も多いわけで……当然、透過PNGを使わなくて済むデザインに縛られてしまいます。
ただしIE6に対応させればいいだけなら、filterプロパティを使えば解決出来たりしますね。
*html [PNGを表示したいセレクタ]{
background-image: none;/*ここで背景画像を消去*/
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src=[PNGファイルの”htmlから見た”パス]);
}
IE7は普通にPNGを表示してくれるので、IE6だけ振り分けたらいいならスターハックが有効です。
これでIE6でも透過PNGを表示出来ますが……悲しいかな、background-positionもbackground-repeatも利きません。
表示は常に左上、リピートはしてくれません。
これはfilterプロパティの仕様で、そもそもbackgroundを制御するスタイルではないためですね。
（なので、background-imageと同時に表示出来ます）
単発で表示させるのならまあこれでも使える場面はあるのですが……今回はボックスサイズの確定されないドロップシャドウに使いたかったわけですよ（´・ω・｀）
しょうがないので（自分は使いたくない方なんですが）IE6で透過PNG表示に対応したライブラリを探すことに。
IE7.jsやIE8.jsは定番なんですが、PNGファイルをリネームしないといけないことと、background-repeatやbackground-positionに対応していないこと。
意味ねーよそれじゃ！（゜д゜）
次に候補であったiepngfix.jsを使ってみることに。
一応、「CSSはそのままでおｋ」、「リネームの必要もなく、普通に使える」とのことで、導入してみたんですが。
元のソースは、width: 540pxのボックスに、高さ1px、幅20pxのpngファイルを、こういうふうに指定していました。
#box{
width: 540px;
min-height: 100%;
margin-top: -160px;
background-position: 510px 0px;
background-repeat: repeat-y;
background-image: url(../image/image.png);
}
つまり、「右から30pxの位置から縦方向に横幅20pxの画像を並べて表示」です。
Firefox3を始めとしたモダンブラウザではちゃんと意図どおりの表示をしてくれますが、iepngfix.jsを適用したIE6だと、ボックスの左端から右端まで、pngファイルをビヨーンと引き伸ばして表示されてしまいました。
どうも……相変わらずbackground-positionは無効になる上に、勝手にボックスサイズにフィッティングされてしまうようです（´-ω-｀）
見た目上はrepeat-yは利いているように見えましたが、コレも多分引き伸ばされただけじゃないかなーと。
まあ1pxの同一パターンなんで、引き伸ばされようが繰り返されようが違いなんてないんですが。
うーん、なんかいいライブラリないかなー（；´д｀）
さいきんわすれっぽいのです。
さてさて、コーディングアヒャーな日々なわけですが、仕事上どうしてもpngファイル使わないといけない場面が出てきました（まあ無理矢理jpgでもいけなくもないんですが）。
ご存知の通り、透過PNGはIE6では未対応です。
IE8が出てきて久しい昨今ですが、まだIE6を使っている人も多いわけで……当然、透過PNGを使わなくて済むデザインに縛られてしまいます。
ただしIE6に対応させればいいだけなら、filterプロパティを使えば解決出来たりしますね。
*html [PNGを表示したいセレクタ]{
background-image: none;/*ここで背景画像を消去*/
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src=[PNGファイルの”htmlから見た”パス]);
}
IE7は普通にPNGを表示してくれるので、IE6だけ振り分けたらいいならスターハックが有効です。
これでIE6でも透過PNGを表示出来ますが……悲しいかな、background-positionもbackground-repeatも利きません。
表示は常に左上、リピートはしてくれません。
これはfilterプロパティの仕様で、そもそもbackgroundを制御するスタイルではないためですね。
（なので、background-imageと同時に表示出来ます）
単発で表示させるのならまあこれでも使える場面はあるのですが……今回はボックスサイズの確定されないドロップシャドウに使いたかったわけですよ（´・ω・｀）
しょうがないので（自分は使いたくない方なんですが）IE6で透過PNG表示に対応したライブラリを探すことに。
IE7.jsやIE8.jsは定番なんですが、PNGファイルをリネームしないといけないことと、background-repeatやbackground-positionに対応していないこと。
意味ねーよそれじゃ！（゜д゜）
次に候補であったiepngfix.jsを使ってみることに。
一応、「CSSはそのままでおｋ」、「リネームの必要もなく、普通に使える」とのことで、導入してみたんですが。
元のソースは、width: 540pxのボックスに、高さ1px、幅20pxのpngファイルを、こういうふうに指定していました。
#box{
width: 540px;
min-height: 100%;
margin-top: -160px;
background-position: 510px 0px;
background-repeat: repeat-y;
background-image: url(../image/image.png);
}
つまり、「右から30pxの位置から縦方向に横幅20pxの画像を並べて表示」です。
Firefox3を始めとしたモダンブラウザではちゃんと意図どおりの表示をしてくれますが、iepngfix.jsを適用したIE6だと、ボックスの左端から右端まで、pngファイルをビヨーンと引き伸ばして表示されてしまいました。
どうも……相変わらずbackground-positionは無効になる上に、勝手にボックスサイズにフィッティングされてしまうようです（´-ω-｀）
見た目上はrepeat-yは利いているように見えましたが、コレも多分引き伸ばされただけじゃないかなーと。
まあ1pxの同一パターンなんで、引き伸ばされようが繰り返されようが違いなんてないんですが。
うーん、なんかいいライブラリないかなー（；´д｀）
