IE6やIE7で横並びのグローバルナビを作るときなどにできてしまう。変な空白を解消する方法です。
上のようなリストを作ろうとしたら下のようなリストになってしまった！！
って経験ないですか？
今回はその画期的な解決方法です。
まずは、ソースからみてください。
HTML
<ul id="GlobalNavi">
<li><img src="/img/gnavi01.png" /></li>
<li><img src="/img/gnavi02.png" /></li>
<li><img src="/img/gnavi03.png" /></li>
<li><img src="/img/gnavi04.png" /></li>
<li><img src="/img/gnavi05.png" /></li>
</ul>
CSS
#GlobalNavi {
list-style:none;
}
#GlobalNavi li {
float:left;
}
上記のように書いて大丈夫なのですが、時々IEで小さな空白ができる場合があります。
この解消法として一番有名なのが、「HTML部分の改行＆TABを削除」というのがありますが。
それでは、あとあと修正する場合などに見にくくなってしまいます。
そういう場合は、こうしましょう。
HTML
<ul id="GlobalNavi"><!--
--><li><img src="/img/gnavi01.png" /></li><!--
--><li><img src="/img/gnavi02.png" /></li><!--
--><li><img src="/img/gnavi03.png" /></li><!--
--><li><img src="/img/gnavi04.png" /></li><!--
--><li><img src="/img/gnavi05.png" /></li><!--
--></ul>
改行部分、TAB部分をコメントアウトしちゃえば、大丈夫！
リストタグを使う場合は、この方法で作っていったほうが、ブラウザ間の違いが出にくくなります。
