不等高列表布局
FF9/Chrome15/Opera11/Safari5(win)/IE6、7、8、9
我们做某些场频展示页面的时候，一般是用列表来组织产品结构，比如淘宝：
这种结构一般都是每一项的高度固定，但是如果有一项高度不固定的话，显示就悲剧了。因为li的浮动就被前面那个高个儿截断了，这一般也是浮动的悲哀。
现在我们转换一下思路，去掉浮动，采用inline-block。
第一个问题：
IE6/7并不支持这个属性，所以hack一下（*display:inline; *zoom: 1;），于是要在所有的主流浏览器支持inline-block就可以这么写display: inline-block; *display:inline; *zoom: 1;当然，其他写法就不多说了。
第二个问题：
除去IE系列的浏览器，其他的浏览器都不会忽略HTML代码中回车带来的空白字符，于是当采用inline-block的时候，我们会发现相邻li之间有一段水平空白，至于空白多少视浏览器而定。最简单的办法，去掉HTML代码中的回车符和空白符，才不采用各自权衡。第二种办法就是设置外层ul的font-size为0，然后在设置li的font-size为正常值。这么处理之后，在FF/chrome/opera下面都正常了。不过有个问题就是win下面的safari还是有1px的水平空白，奇葩了，我的解决办法就是设置ul的letter-spacing: -1px;然后再设置li的letter-spacing: normal;
解决上面两个问题之后，基本就可以做到各浏览器兼容了（至于mac下面的safari我就不管了，穷B买不起也就懒得测了）。
下面是demo的html代码：
demo等高列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>等高列表</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body{ font-size: 12px;}
ul{ list-style: none;}
.ul_wrap{ border:3px solid #ff8c00;}
.grid { width: 540px; overflow: hidden; _zoom:1;}
.grid li{ width: 108px; margin: 3px; padding: 5px; border: 1px solid #d4d4d4;}
.grid li a{ display: block; height: 108px; background: #4169e1;}
.grid li p{ padding-top:8px;}
.list_float li{ display: inline; float: left;}
.list_inline{ font-size: 0; letter-spacing: -1px;}
.list_inline li{ display: inline-block; *display:inline; *zoom: 1; vertical-align: top; letter-spacing: normal; font-size: 12px;}
</style>
</head>
<body>
<div class="ul_wrap">
<ul class="grid list_float">
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
</ul>
</div>
<div class="ul_wrap">
<ul class="grid list_inline">
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
<li>
<a href=""></a>
<p>神一样的队友，神一样的队友，神一样的队友，神一样的队友</p>
</li>
</ul>
</div>
</body>
</html>
