2009年02月25日

背景画像の設定について:その2

こんにちは。
溝上です。

今回は「背景画像の設定について」で説明しきれなかった内容を紹介していこうと思います。

前回と同じですが、まずはサンプルをご覧ください。
(cssサンプル)
.rollover02 a {
display:block;
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}

font-sizeとline-heightを1pxにしている理由は前回の記事を参照してください。

今回はtext-decorationとoutlineをnoneにしている理由をご紹介します。

まずoutlineをnoneにしている理由ですが、サンプルの様にaタグを画像化した時に必要になります。
下にサンプルを用意しました。

(cssサンプル)
.btn a {
display:block;
width:150px;
height:30px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
}
このサンプルのボタンをクリックした場合のスクリーンショットがコチラです。
▼Internet Explorerの場合▼

▼Firefoxの場合▼


なんかFirefoxで横にのびちゃってますね。
この点線がoutlineです。
Internet Explorerならoutlineにnoneを指定しなくても横に伸びたりしませんが、
Firefoxではtext-indent:-9999pxで指定した箇所まで延々とoutlineを伸ばしてくれます。

このままでは不恰好なのでoutlineにnoneを指定し、outlineを非表示にすることで対応します。


次にtext-decorationをnoneにしている理由ですが、

「Netscapeの対応の為だよ」

と先輩が教えてくれました。
早速実験してみます。

(cssサンプル)
.btn a {
display:block;
width:150px;
height:30px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
outline:none;
text-decoration:underline;
}
このサンプルをIEとNetscapeで見比べてみます。
▼Internet Explorerの場合▼

▼Netscapeの場合▼


ちょっと解りにくいですが、なんか左に線が・・・
これもoutlineの時と同じくtext-indentで指定した-9999pxまで延々とunderlineが伸びているようです。

Netscapeはサポートも終了し、使っている方も少ないかと思いますが、
CSSのプロパティを1つ書くだけで対応できるならやっておいて損は無いと思います。

 

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 20:08 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。