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
ブログの更新を忘れていた、んぼです。
さいきんわすれっぽいのです。
さてさて、コーディングアヒャーな日々なわけですが、仕事上どうしても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の同一パターンなんで、引き伸ばされようが繰り返されようが違いなんてないんですが。
うーん、なんかいいライブラリないかなー（；´д｀）
下から上へ、んぼです。
もうやめて私はもう上れない。
ニコニコでバーガーバーガー動画を観てて、むしょうに食べたくなってきたので行って来たわけさマクド。
ちなみにマックは林檎計算機っていう会社が作ってるPCね、異論は認めない。
で、普段行く店とは別の店に、何となく思いつきで行ってみたのさ。
夕方だったんだけど、思ったより空いててね、「ああ、やはり豚インフルエンザの影響が（ｒｙ」とかぼーっと考えつつ、カウンターに並んだ次第。
んぼ「ビッグマックのセット下さい」
店員「申し訳ございません。ただいまバーガーの機械が壊れていまして」
んぼ「（゜д゜）……じゃあどれならいけますか？」
店員「バーガー以外なら大丈夫です！（＞∀＜）ｂ」
……何を食えと？
マクドからバーガー抜いたらドリンクとサイドメニューしか残らんじゃないか。
「コーラLサイズとナゲットのマスタードとポテトLとアップルパイとコーラLください」とか言わせたいのかこの店員。
メニューの端から端まで集めたサイドメニュー群とLコーラ二つを盆に載せて食えというのか。
しかも総額いくらになると思ってんだ←むしろこっちが重要
というか俺、バーガー食いに来たんですけどね。
まあさすがに店員さんも困ったであろう。
ただでさえインフルエンザ効果で、がっぽがっぽなのはマスク屋さんだけという状況下で、主力製品が出せなくなったら。
喩えて言うなら「ぼうぎょ」と「にげる」しか選べないRPGのようなもんである。
一体それに何を期待すればいいというのか。
当然何も期待できない俺は「やっぱやめときます」と言って店を出たわけですが。
奥のほうから別のスタッフが「もうしわけございませーん」と慣れた様子で声をかけてくれたので、「ああ、やっぱみんな帰っちゃうんだな」と思った次第。
店長さんの胃が気がかりですな。
まあそれよりも気になったのは、この状況にも関わらず。
店内で何か食ってた数組。
な……何を召し上がってらしたのかしら？（；´д｀）
もうやめて私はもう上れない。
ニコニコでバーガーバーガー動画を観てて、むしょうに食べたくなってきたので行って来たわけさマクド。
ちなみにマックは林檎計算機っていう会社が作ってるPCね、異論は認めない。
で、普段行く店とは別の店に、何となく思いつきで行ってみたのさ。
夕方だったんだけど、思ったより空いててね、「ああ、やはり豚インフルエンザの影響が（ｒｙ」とかぼーっと考えつつ、カウンターに並んだ次第。
んぼ「ビッグマックのセット下さい」
店員「申し訳ございません。ただいまバーガーの機械が壊れていまして」
んぼ「（゜д゜）……じゃあどれならいけますか？」
店員「バーガー以外なら大丈夫です！（＞∀＜）ｂ」
……何を食えと？
マクドからバーガー抜いたらドリンクとサイドメニューしか残らんじゃないか。
「コーラLサイズとナゲットのマスタードとポテトLとアップルパイとコーラLください」とか言わせたいのかこの店員。
メニューの端から端まで集めたサイドメニュー群とLコーラ二つを盆に載せて食えというのか。
しかも総額いくらになると思ってんだ←むしろこっちが重要
というか俺、バーガー食いに来たんですけどね。
まあさすがに店員さんも困ったであろう。
ただでさえインフルエンザ効果で、がっぽがっぽなのはマスク屋さんだけという状況下で、主力製品が出せなくなったら。
喩えて言うなら「ぼうぎょ」と「にげる」しか選べないRPGのようなもんである。
一体それに何を期待すればいいというのか。
当然何も期待できない俺は「やっぱやめときます」と言って店を出たわけですが。
奥のほうから別のスタッフが「もうしわけございませーん」と慣れた様子で声をかけてくれたので、「ああ、やっぱみんな帰っちゃうんだな」と思った次第。
店長さんの胃が気がかりですな。
まあそれよりも気になったのは、この状況にも関わらず。
店内で何か食ってた数組。
な……何を召し上がってらしたのかしら？（；´д｀）
出かけたくなるね！ んぼです。
出不精だけどね！
「ブラッディ・マンデイ」の11巻を最終巻だと思って買ったら、Season2があるみたいで狂喜乱舞しています。
恵作品は、マガスペに連載されていた「創竜伝」をちょっと読んでたんですが、あれも面白かったですね。
戦車と少年がガチで戦うような話だったけどｗ
夏から連載スタートとのことですが、早くもSeason2には期待。
今度はどうなるんだろうねー（・∀・）
出不精だけどね！
「ブラッディ・マンデイ」の11巻を最終巻だと思って買ったら、Season2があるみたいで狂喜乱舞しています。
恵作品は、マガスペに連載されていた「創竜伝」をちょっと読んでたんですが、あれも面白かったですね。
戦車と少年がガチで戦うような話だったけどｗ
夏から連載スタートとのことですが、早くもSeason2には期待。
今度はどうなるんだろうねー（・∀・）
色んな意味で隔離されてる、んぼです。
もどってー！ こっちもどってー！
住んでる場所のめっさ近くで、今話題の豚インフルエンザ感染者がイパーイ出ました。
朝からマスクが売り切れてますよ。
うん、タクシーの運転手さんに聞いたんですが、新聞に載ってた「私立高校」って……めっさ近くなんですよ（；´д｀）
なんか「死亡率0.4％」とかって見た覚えがあるんですが。
えーと……「発症したら200人に一人弱は死ぬ」ってことですか……？
マジで？
感染者は隔離されるとか聞くし、これはかなり怖い状況になってきました。
仕事柄不特定多数の人と接触するので、感染する可能性も高ければ、自分が保菌者になれば感染源になる可能性も……うわー！（；´д｀）
マスクしなきゃ！→売り切れてて買えないよ！
なんというコンボ。
死ぬかも知れんのでPCの中身をキレイにしておこうとおｍ（ｒｙ
とりあえずマスクだ、という結論に達したところで、今日はこのへんで。
ばいちゃおー！（゜д゜）ノシ
もどってー！ こっちもどってー！
住んでる場所のめっさ近くで、今話題の豚インフルエンザ感染者がイパーイ出ました。
朝からマスクが売り切れてますよ。
うん、タクシーの運転手さんに聞いたんですが、新聞に載ってた「私立高校」って……めっさ近くなんですよ（；´д｀）
なんか「死亡率0.4％」とかって見た覚えがあるんですが。
えーと……「発症したら200人に一人弱は死ぬ」ってことですか……？
マジで？
感染者は隔離されるとか聞くし、これはかなり怖い状況になってきました。
仕事柄不特定多数の人と接触するので、感染する可能性も高ければ、自分が保菌者になれば感染源になる可能性も……うわー！（；´д｀）
マスクしなきゃ！→売り切れてて買えないよ！
なんというコンボ。
死ぬかも知れんのでPCの中身をキレイにしておこうとおｍ（ｒｙ
とりあえずマスクだ、という結論に達したところで、今日はこのへんで。
ばいちゃおー！（゜д゜）ノシ
