新しい単純な HTML テスト ファイルを作成し、以下の ul li タグをテストします。
| 引用した内容は以下の通りです。 <ul> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> </ul> <ul> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 1</a></li> </ul> |
テスト 1. CSS を次のコードとして定義すると、効果は次のようになります
| 引用した内容は以下の通りです。 プレーンコピーをクリップボードプリントに表示しますか? 本文{font-size:12px;margin:0} ul{リストスタイル:なし;マージン:0;パディング:0;幅:120px;} ul li{背景:緑;高さ:20ピクセル;} ul li a{color:#fff;padding:0 0 0 10px;} 本文{font-size:12px;margin:0} ul{リストスタイル:なし;マージン:0;パディング:0;幅:120px;} ul li{背景:緑;高さ:20px;} ul li a{color:#fff;padding:0 0 0 10px;} |
以下に示すように、IE5 と IE5.5 の両方で左側に空白があり、IE5 では LI 間の行間が空白であることがわかりました。
テスト 2. CSS を次のコードとして定義します
| 引用した内容は以下の通りです。 プレーンコピーをクリップボードプリントに表示しますか? 本文{font-size:12px;margin:0} ul{リストスタイル:なし;マージン:0;パディング:0;} ul li{背景:緑;高さ:20px;幅:120px;} ul li a{color:#fff;padding:0 0 0 10px;} 本文{font-size:12px;margin:0} ul{リストスタイル:なし;マージン:0;パディング:0;} ul li{背景:緑;高さ:20px;幅:120px;} ul li a{color:#fff;padding:0 0 0 10px;} |
テスト 1 と比較すると、ul の定義から li の定義まで width:120px; を配置するだけで、IE5 と IE5.5 の左側の空白の問題は解決されますが、IE5 の li の間にはまだギャップがあります。以下に示すように
テスト 3. CSS を次のコードとして定義します
| 引用した内容は以下の通りです。 本文{font-size:12px;margin:0} ul{リストスタイル:なし;マージン:0;パディング:0;} ul li{背景:緑;高さ:20ピクセル;幅:120ピクセル;垂直配置:下;} ul li a{color:#fff;padding:0 0 0 10px;} |
2 番目のテストと比較すると、li の定義にvertical-align:bottom が追加されます。これは IE5 では正常であり、li 間の空白行の間隔はなくなり、以下に示すように各ブラウザで効果は同じになります。
要約する
1. IE5 で li が空白行間隔を生成する問題の解決方法: li で幅を定義する場合、li でvertical-align:bottom; を定義する必要があります。
2. UL では幅を定義せず、UL の外側の LI または DIV で幅を定義することが最善です。
3. LI を記述する最良の方法は、高さと幅を li 内に書き込むか、vertical-align:bottom; を記述するか、ul の外側に div のレイヤーを追加して幅を定義し、その後 li 内に記述することです。幅とvertical-align:bottom;を定義する必要はなく、表示は通常になります（IE5では空白行間隔は生成されません）が、高さは依然として定義する必要があります。