Blog Top

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

IE6でリンクにdisplay:blockを適用させるには

  • このエントリーをはてなブックマークに追加
  • Yahoo!ブックマークに登録
  • Googleブックマークに追加
  • Buzzurlにブックマーク
  • この記事をクリップ!
  • イザ!ブックマーク

aタグにdisplay:blockを指定してクリック領域を広げるのは一般的な手法だけど、何故かIE6ではaタグにdisplay:blockしただけではクリック領域が広がらない。

クリック領域が広がらない例


p {
	width:300px;
}

p a {
	display:block
}

<p><a>サンプル</a></p>

上記の例だと、IE6ではテキスト部分しかクリックできず、display:blockが機能しない。IE6でもクリック範囲を広げるには、display:blockを指定したaタグにheightかwidthを指定する。


p {
	width:300px;
}

p a {
	display:block;
	height:100%; /* もしくはwidthを指定 */
}

<p><a>サンプル</a></p>

heightかwidthを指定する事で他のブラウザと同様に、IE6でもクリック領域が広がる。

関連記事

トラックバック

http://blogmemoblog.blog.fc2.com/tb.php/13-88032161

コメントの投稿

管理者にだけ表示を許可する

検索フォーム


RSSリンクの表示

QRコード

QR

問い合わせ

当ブログ管理人への問い合わせはこちらのフォームからお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。