CSSでロールオーバー macIEで苦戦

最近ではもっぱらホームページ上のボタンはCSSを利用して
作っています。

以前はjavascriptを使って、マウスオーバー前の画像と
マウスオーバー後の画像を作って表示させていましたが、
今はマウスオーバー前と後とのデザインを並べて一枚の
画像として保存し、background-positionで画像をずらし
ロールオーバー表現を行っています。

これをやりだすとなかなか面白くて、尚且つソースもスッキリ
するので良い感じです＾＾

ただ、macIEに対応させようと思うと、ちょっと気をつけなければ
なりません。


それは、<p></p>でこのボタン部分を構成すると
macIEではボタンが表示されないんです。

昨日あるページを作り、家に帰ってから最近購入したmacbook
で確認してみると、ちゃんと表示されるボタンとされていない
ボタンがありました。

で、不思議に思いソースを比較してみました。

すると、<p></p>で構成されたボタンは見えず、
<div></div>で構成されたボタンは問題なく表示されて
いることがわかりました。

winIEやmacFirefoxなどでは、どちらでも問題なく表示されるんですが
macIEだけはダメみたいですね。


ユーザー数は少ないといえども、まだ使用している人がいることを
考えると、可能な限りmacIEにも対応してあげたいところ。

この先macIEにはまだまだ泣かされそうですが、とりあえず頑張って
対応していきたいとおもいます(*^-^)

LINK
挨拶状印刷｜はがき 印刷｜引越し はがき｜結婚 はがき
出産 はがき｜年賀状｜喪中 はがき｜残暑見舞い