• このエントリーをはてなブックマークに追加

問題への経緯

ナビゲーションでよく利用する手段。<ul>を利用したマークアップ。

  1. <ul>の中に当然<li>を入れて、<a>を入れる。
  2. <a>のテキストをtext-indentでマイナスにして文字を消して、代わりにblockにして背景を表示させてボタンにさせる(overflow付き)。
  3. ちょっとパディングを持たせたいので<ul>指定。

問題の内容

IE6でそういう風に指定すると、a:hoverした時に<a>にheightを指定しているのにもかかわらず、高さが変わってしまう。
どういったロジックでこういったことになるかは分からないものの、<ul>にpaddingがついていると高さが変化してしまうらしい。IE6の計算間違えのバグのひとつでしょう(a:hoverした時に高さを指定してあるのにべろんと背景が出てうっとうしい。)

問題解決・対策

対策としては、ナビゲーションをリスト化している、<ul>にはpaddingではなくてmarginを利用するようにする。
どうしても、内部の要素にpaddingを付けたいのであれば、<li>につける。