画像置換とは、「text-indent:-9999px;」を使いテキストを画面外に飛ばし、代わりに背景画像を表示させる方法です。Firefox環境の場合、この方法を使って表示させた画像にaタグが付いていると、クリックしようとした時に点線が現れることがあります。きちんとした企業さんのサイトでもたまに見かけることがありますよね。

点線を消すだけなら方法はとても簡単です。画像置換を行っているaタグに「overflow: hidden;」を指定するだけでOKです。ですが、このままだとMac版のIE5で問題が発生するようなので別途CSSハックが必要になってきます。

/* \*/ overflow: hidden; /* */

このCSSハックを使えば、Mac版のIE5に対して「overflow: hidden;」を無視させることができます。

参考書籍

Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)

posted with amazlet at 09.06.06

大藤 幹
毎日コミュニケーションズ
売り上げランキング: 9089

Amazon.co.jp で詳細を見る

このブログをRSS購読する

関連する記事

• SmartyとCSSをつかって、Xoopsでも、現在ページがハイライトするメニューの作り方。ロールオーバー付き。 #xoops
• MacのTwitkitにRTボタンをつけました
• ほぼCSSのみで作る縦型プルダウンメニュー
• Firefoxのネットサーフィンのスピードが3倍速くなるツール