CSSでロールオーバー macIEで苦戦
最近ではもっぱらホームページ上のボタンはCSSを利用して
作っています。
以前はjavascriptを使って、マウスオーバー前の画像と
マウスオーバー後の画像を作って表示させていましたが、
今はマウスオーバー前と後とのデザインを並べて一枚の
画像として保存し、background-positionで画像をずらし
ロールオーバー表現を行っています。
これをやりだすとなかなか面白くて、尚且つソースもスッキリ
するので良い感じです＾＾
ただ、macIEに対応させようと思うと、ちょっと気をつけなければ
なりません。
それは、<p></p>でこのボタン部分を構成すると
macIEではボタンが表示されないんです。
昨日あるページを作り、家に帰ってから最近購入したmacbook
で確認してみると、ちゃんと表示されるボタンとされていない
ボタンがありました。
で、不思議に思いソースを比較してみました。
すると、<p></p>で構成されたボタンは見えず、
<div></div>で構成されたボタンは問題なく表示されて
いることがわかりました。
winIEやmacFirefoxなどでは、どちらでも問題なく表示されるんですが
macIEだけはダメみたいですね。
ユーザー数は少ないといえども、まだ使用している人がいることを
考えると、可能な限りmacIEにも対応してあげたいところ。
この先macIEにはまだまだ泣かされそうですが、とりあえず頑張って
対応していきたいとおもいます(*^-^)
作っています。
以前はjavascriptを使って、マウスオーバー前の画像と
マウスオーバー後の画像を作って表示させていましたが、
今はマウスオーバー前と後とのデザインを並べて一枚の
画像として保存し、background-positionで画像をずらし
ロールオーバー表現を行っています。
これをやりだすとなかなか面白くて、尚且つソースもスッキリ
するので良い感じです＾＾
ただ、macIEに対応させようと思うと、ちょっと気をつけなければ
なりません。
それは、<p></p>でこのボタン部分を構成すると
macIEではボタンが表示されないんです。
昨日あるページを作り、家に帰ってから最近購入したmacbook
で確認してみると、ちゃんと表示されるボタンとされていない
ボタンがありました。
で、不思議に思いソースを比較してみました。
すると、<p></p>で構成されたボタンは見えず、
<div></div>で構成されたボタンは問題なく表示されて
いることがわかりました。
winIEやmacFirefoxなどでは、どちらでも問題なく表示されるんですが
macIEだけはダメみたいですね。
ユーザー数は少ないといえども、まだ使用している人がいることを
考えると、可能な限りmacIEにも対応してあげたいところ。
この先macIEにはまだまだ泣かされそうですが、とりあえず頑張って
対応していきたいとおもいます(*^-^)
