喫茶LAPON-β

メモメモ。
liを入れ子にすると改行みたいな余白ができませんか？？

こんな風にリスト入れ子にすると...

<ul>
<li>ケーキ<⁄li>
<li>クッキー<⁄li>
<li>

<ul>
<li>チョコチップ<⁄li>
<li>レーズン<⁄li>
<li>アーモンド<⁄li>
<⁄ul>

<⁄li>
<⁄ul>

IE6・IE7の表示はこう表示される
●ケーキ
●クッキー
●
　　○チョコチップ
　　○レーズン
　　○アーモンド

その他のブラウザの表示はこう表示される
●ケーキ
●クッキー
● ○チョコチップ
　　○レーズン
　　○アーモンド

こんな風に表示されることがあるようです。
これはバグというよりは解釈の違いですよね？？きっと。
なので、IE6,7はトップに一行分余計なマージンが空きます。

解決方法
* html li.nested ul{margin-top:-1em;} /* IE6 */
*+html li.nested ul{margin-top:-1em;} /* IE7 */
ハックを使ってIE6.7にmargin-top:-1em;を指定する。

HTMLをいじらず解決するにはコレかなと、思います。
ine-heightを0にしても大丈夫だった気がしますが、ine-height:0はなるだけ使いたくないので、やっぱりmargin-top:-1em;がいいのかな、と思いました。

------
参考サイトhttp://gac.kir.jp/21/20999

------
追記　20091106

<ul>
<li>ケーキ<⁄li>

<li>クッキー
<ul>
<li>チョコチップ<⁄li>
<li>レーズン<⁄li>
<li>アーモンド<⁄li>
<⁄ul>
<⁄li>

<⁄ul>

●ケーキ
●クッキー
　　○チョコチップ
　　○レーズン
　　○アーモンド

にすれば、バグ出ないみたいです。。。
構文的にNGなのだと思ったていたら、どうやらOKみたいです。
W3CのHTML検証でもPassed でした。

確かにこのリストの意味的には
クッキーの種類にはチョコチップ、レーズン、アーモンドの3つがあるよ。
って感じなので、意味的にもこちらの方が正しい気がします。

ハックを使わずにも済むので、今度からはhtmlの組み方はこちらにしようと思います。