IE5.5 - IE6でリストのリンク要素をブロックにすると変な余白ができる
いわゆる「 <li><a href="#">ボタン名</a></li>」のような場合。
以下のようなソースの場合に発生。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<style type="text/css">
<!--
ul { list-style-type: none; }
li a { display:block; background:#3399FF; padding:5px; color:#000; }
li a:hover { background:#990000; }
-->
</style>
</head>
<body>
<ul>
<li><a href="#">リスト１</a></li>
<li><a href="#">リスト２</a></li>
<li><a href="#">リスト３</a></li>
<li><a href="#">リスト４</a></li>
<li><a href="#">リスト５</a></li>
</ul>
</body>
</html>
この場合、対処方法としては、
li { height="1%" }
にしてソースのliタグの改行を削除する。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<style type="text/css">
<!--
ul { list-style-type: none; }
li { height:1%; }
li a { display:block; background:#3399ff; padding:5px; color:#000; }
li a:hover { background:#990000; }
-->
</style>
</head><body>
<ul><li><a href="#">リスト１</a></li><li><a href="#">リスト２</a></li><li><a href="#">リスト３</a></li><li><a href="#">リスト４</a></li><li><a href="#">リスト５</a></li></ul>
</body>
</html>
しかしDreamweaverなどで自動改行されると非常に面倒ですね・・・
aタグにwidthを指定すると直るケースもあります。
ul { list-style-type: none; }
li a { display:block; background:#3399ff; width:400px; padding:5px; color:#000; }
li a:hover { background:#990000; }
この場合は、これでも修正が出来ましたたが駄目な場合も多々あります。
またリスト全てをフロートさせる手もあります。
Posted 12/24/07 by ykamiyama | Filed under: Design Tips
Comments
Add Comment