home > Web::Blogoscope > Firefox 1.5と「outline」

Web::Blogoscope

Firefox 1.5と「outline」

Firefox 1.5ではoutline関連プロパティがサポートされたが、CSSで画像置換（image replacement、画像の代替表現）のテクニックを使っている場合、ちょっと注意が必要。

次のスクリーンショットを見てほしい。

[スクリーンショット: Firefox 1.5の画面。outline関連プロパティがサポートされた影響で、タイトルロゴの左側に不自然な点線が表示されている]

タイトルロゴの左側に不自然な点線が表示されている。これはoutline関連プロパティのサポートの影響だ。text-indentプロパティでテキストを非表示化していて、そのテキストにリンク（a要素）を設定している場合、フォーカス時に点線が発生する。

この点線を発生させないためには、outline-widthプロパティまたはoutlineプロパティ（ショートハンド）で値に「0」と指定しておく。

div#header a {
  display: block;
  width: 717px;
  height: 50px; 
  text-decoration: none;
  outline-width: 0;
  }

なお、outline関連プロパティの値は継承されないので、このようにa要素にダイレクトに指定する必要がある。

Posted on 2005-12-01T20:43+09:00 | Category: Webトレンド

トラックバックのURI:
http://www.cybergarden.net/mt/mt-tb.cgi/269