2009年2月15日

メニューボタン修正

図1メニューボタンの表示がIE6で問題だったのですが、何とか無事に修正できました。
最初の状態は図1で、各項目の下に12〜15pxくらいの余白ができてしまいました。スタイルシート(オリジナル)は以下のとおりでした。
なお、IE以外のブラウザでは、以下の図1,2,4のケースで余白が生じることなく、問題なく表示されます。
ul#menu li a {
      display: block;
      background-image: none;
      background-color: #bfd7cd;
      padding: 3px 8px;
      border-bottom: #666 1px solid;
}

図2原因はpaddingの設定だろうと推測し、上下のpaddingの値を0にしてみましたが、結果は図2のとおりで、各項目の上下の幅が狭まっただけで、余白は全く同じです。
行間の指定(line-height: 1.5)が影響しているのかと考え、各項目の高さを24px、行間を同じ24pxに指定、左右の余白はテキストのセンタリングで対処することにしました。高さの「ついでに」幅も計算して153pxを指定しました。その結果、図3のように不具合はなくなりました。
スタイルシートは以下のとおりです。
ul#menu li a {
      display: block;
      width: 153px;
      height: 24px;
      padding: 0;
      background-image: none;
      background-color: #bfd7cd;
      text-align: center;
      border-bottom: #666 1px solid;
      line-height: 24px;
}

図3ここまででもよかったのですが、どうしてもテキストを左寄せにしたかったので、センタリングの指定を削除、そのかわり左に8pxのpaddingを設定してみたのですが、図4のように今度は右端に(おそらく)8px分の余白ができてしまったのです。
スタイルシートは以下のとおりです。なお、widthの値は、153pxからpaddingの8pxを差し引いた値に変更しています。
ul#menu li a {
      display: block;
      width: 145px;
      height: 24px;
      line-height: 24px;
      background-image: none;
      background-color: #bfd7cd;
      padding-left: 8px;
      border-bottom: #666 1px solid;
}

図4不思議なことにIE6では、ボーダー、背景色ともwidthで指定した幅にしか設定されないようです。
widthの値を153pxにしてみると、予想どおり余白はなくなったものの、当然ながらIE以外のブラウザで、メニュー部分がタイトルよりも8px分右側にはみ出してしまいました。
図5またも挫折しかかりましたが、やはり幅(width)の指定が問題なのではないかと思い、width: autoとしてみたところ、不具合が解消し、今の状態(図5)になりました(ちなみに、widthの指定を削除しても結果は同じです)。
おそらく、このようなバグは広く知られたものなのでしょうが、IE(6以前)にはいつも泣かされます。

コメントする

ページの先頭に戻る