IE9でtext-shadowを使う方法を模索中
なぜか、またもや健康ネタではなく、今回はブラウザネタｗ
このサイトはIEよりもFirefox、Opera、Google Chrome などのモダンブラウザで見ていただくことを推奨してます。まぁ、IEで見てもらっても問題ないんですけどね。
理由はデザインのCSSで「text-shadow」を指定してるからです。
タイトルとか右のサイトバーとか、その他の見た目がちょっとだけ違いますｗ
IEは最新のIE9でも text-shadow が使えないという貧弱さ。
多くの人がIE9で実装されると予想してたみたいですが、実装されてませんでした。。。
IE9で見た場合（画像クリックで拡大）
Firefox、Opera、Google Chrome 等で見た場合（画像クリックで拡大）
で、IEでも同じ見た目にできないかいろいろ模索中（簡単なのは画像だけど、なんか嫌ｗ）。
解決候補としてはIEに独自実装のフィルタを使うこと。試してみた。
filter: dropshadow(color=#bfbfbf, offX=2, offY=2, Positive=true);
IEのdropshadowを使ってみた（画像クリックで拡大）
これは酷いｗｗｗ
ならば、glow でぼかし指定ならどうだ？
filter: glow(color=#bfbfbf,,strength=2);
IEのglowを使ってみた（画像クリックで拡大）
ますます酷くなったｗｗｗ。ダメだこりゃ。。。
やっぱり、javascript でハックしないとダメかな？
javascript を使った方法はいくつかあるけど、有力候補は asamuzaK.jp さんの
「IE9で（ついでにIE7、IE8でも）text-shadow」
というもの。
試してみたけど、当方では、まだうまくいってませんｗｗｗ
疲れたので、今回はこれで終了。。。
タグ
2011年5月10日 | Comments/Trackbacks(4)
カテゴリ: ブラウザ
トラックバック&コメント
この投稿のトラックバックURL:
トラックバック
コメント
サイト内容のご指摘や相互リンクのお問い合わせはこちらから
どうも、作者ですw
うまくいかないということですが、
ieShadowSettings関数の中身（配列）を
{ sel : ‘#header-logo #logo-text, #sidebar h3, #main-contents h3′, shadow : ’2px 2px 3px #bfbfbf’ },
{ sel : ‘a.wp_social_bookmarking_light_instapaper’, shadow : ’1px 1px 0px #3b3b3b’ }
にしてお試し下さい
質問などあれば、お気軽に当該ページにコメントをどうぞ
それでは
Kazz さん
作者さま自らきていただくとは、ビックリしましたｗ
ありがとうございます。
早速、試させていただきました。
結果は、新しい記事「IE9でtext-shadowの続き・・・」に
結論から言えば、ロゴ部分はうまくいったものの、
なぜか、H3部分はうまくいかずでした。。。
使っているスクリプトが少し古いバージョンのようです
現在、 http://asamuzak.jp/html/321 にあげている最新版で再度お試し下さい
度々、すみません。
最新のスクリプトで試してみたところ上手くいきました。
新しく書いた記事の方にも、上手くいった趣旨を追記しておきました。
ありがとうございます。