MS Access Tips/Sample and VBA and Blog customize etc...

jQueryでドロップシャドウ その3

前記事 jQueryでドロップシャドウ その2 で各プラウザでのレイアウトのくずれをCSSハックで対策したのですが、まだ、プラウザ間で下記のような微妙な表示のずれが残っていました。

IE7 での表示(IE6でもほぼ同じ)
DropShadow11.png

IE8(IEester)での表示(FireFox, Google Chrome でもほぼ同じ)
DropShadow12.png

DropShadow設定を同じにすると、明らかに後者の方の影は上に少しずれています。これをなんとか解消すべくトライしました。

難易度:

まず、IE7 でDropShadowスクリプトの設定を調整したのが下記です。

この結果となるべく近い表示になるように FireFoxで確認しながら調整したのが下記の設定です。

この2つの設定をプラウザによって変更するようなコードをかけばいいわけです。jQuery のAPI で jQuery.browser.msie でIEかどうか、jQuery.browser.versionでバージョンが取得できますので、それを使ってIf文で場合分けしました。

対策後のIE8 での表示結果
DropShadow13.png
ほぼ、同じ感じに表示されてます。

同様に記事タイトル(h3要素)も対策しました。


拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/146-d4e66f98
該当の記事は見つかりませんでした。