福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン

ご指定された単一記事を表示しています。
2013年8月8日 タグ:

CSS position要素の中での画像置換 webkit系は要注意

作業をしていて、少しハマったことがあっとので記録しておきます。

以前ご紹介した、「jQuery マウスオーバーで横からパネルかメニューをニューっと出す」という記事で、メニューテキストを画像で制作する機会がありました。

作業的には「画像置換」を行うだけですので問題ないと思ったのですが、webkit系のブラウザだと、マウスオーバーした時点で、文字が左にスライドして飛んで行ってしまいます。 (普段Firefoxを愛用しているので気づかなかった)

自分が使った画像置換は以下のタイプです。

少し悩んで違うタイプの画像置換にしたところ、思い通りの動きになりました。

今回のメニューは、position指定している中での画像置換なので、ちょっとバグったんでしょうか。
とりあえず解決です。

▶ DEMO

*webkit系のブラウザでご確認ください。

カテゴリー:CSS
タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

FB Comment 試験中