リストコンテンツをブロック要素化すると余白が挿入される問題[未修正]

IEでは、リスト内のインライン要素をブロック要素化すると、リストの各項目の下に余白が挿入されるという問題が発生する。

サンプルソース8-1-0では、リストのコンテンツとしてリンクを記述している。リンク部分には背景色などのデザインを指定しているが、<a>で構成されるのはインライン要素であるため、そのままでは文字の部分だけがリンクとして機能する。この段階では、リストの各項目の下に余白はなく、すべての項目がくっついて表示される。

サンプルソース8-1-0

ここで、<a>をブロック要素として処理すれば、リンク部分を横に長くし、リンクボタンとしてデザインすることができる。そのためには、サンプルソース8-1-1のように、<a>に対してdisplay:blockと指定する。

しかし、IEで表示するとリストの各項目の下に存在しないはずの余白が挿入されるという問題が発生する。一方、Firefoxでは余白が挿入されることはない。

サンプルソース8-1-1

この余白は、<a>や<li>のマージンやパディングでは消すことができず、<li>のline-heightプロパティの値によって大きさが変化する。このことから、IEではブロック化したインライン要素を含むリスト要素のline-heightの処理がきちんと行われていないと考えることができる。

たとえば、サンプルソース8-1-1-1では、余計な余白を入れないようにするため、<a>や<li>のマージンやパディングを0に指定し、<li>に対してline-heightを50ピクセルと指定している。line-heightをブロック要素に適用した場合、内包するインライン要素の最小限の高さを指定すると定義されていることから、サンプルソース8-1-1-1の場合、テキスト部分の高さが50ピクセルとなるはずである。

これをFirefoxで表示すると、テキスト部分の高さが50ピクセルで表示される。リンク項目の下に余計な余白が挿入されることもない。しかし、IEで表示した場合、テキスト部分の高さは50ピクセルで表示されるが、その下の余白サイズもテキスト部分に連動して大きくなり、テキスト部分と合わせて約100ピクセルの高さで表示されていることがわかる。これは、標準規格に反した表示であると言える。

サンプルソース8-1-1-1

なお、この余白を削除しようとした場合、<li>のline-heightを「0」と指定することで問題を回避することができる。たとえば、サンプルソース8-1-1で余白を削除するように指定すると、サンプルソース8-2-1のようになる。ただし、<li>のline-heightを0としただけでは、子要素<a>のline-heightも「0」となってしまうため、<a>に対しては「line-height:normal」と指定し、標準の高さで表示されるようにしておく。

サンプルソース8-1-2

ブロック要素化したリンク範囲が機能するように修正

これまでのIEでは、ブロック要素化したリンクの親要素に横幅が指定されると、文字部分しかリンクが機能しなくなるという問題が発生した。しかし、IE7 beta2ではこの問題は修正されている。

サンプルソース8-1-3は、8-1-1のリスト全体を<div>でマークアップし、<div>の横幅を200ピクセルに指定したものである。<a>から見ると親要素に横幅が指定されたことになり、IE6では背景色だけが表示された部分ではリンクが機能しなくなる。一方、IE7 beta2では背景色だけが表示された部分にカーソルを重ねても、きちんとリンクが機能することがわかる。

サンプルソース8-1-3