メニューのリストでwhite-space

今まであまり使う機会がなかったんだけど、

<ul>
<li><a href="aaa.html">AAA</a></li>
<li><a href="bbb.html">BBB</a></li>
<li><a href="ccc.html">CCC</a></li>
<li><a href="ddd.html">DDD</a></li>
</ul>

みたいなよくあるメニューのリストをCSSでliのwidthを指定せずに

li { float: left; }

ってして横並びにすると、ulの横幅に収まらなくなったliは自動的に次の行に折り返してくれる。
ただこれがIEだと、横幅が足りないとか関係なく、入る分の領域にliの要素を改行してでも入れ込んじゃうみたいでタチが悪い。
そんな時に white-space が使えるってのをはじめて知った。
CSSで

li { float:left; white-space: nowrap; }
a { display: block; }

ってするとIEでもちゃんとliを折り返してくれる。
これほんと便利。

参考： CSSサンプルブログ