inline-block 总结

一、inline-block 设置
IE6/7浏览器设置
如果是inline水平的元素，直接：
a {display:inline-block;}

如果是block水平的元素，方法有两个：
li { display:inline-block;}
li { display:inline;}
或者：
li{ display:inline; *zoom:1;}

二、列表布局
css
ul{
font-size:0; -webkit-text-size-adjust:none; //Chrome 最小字体限制
letter-spacing:-3px; //具体设值参考2
}

li {
font-size:12px; letter-spacing:0;
margin:5px 0; width:200px; min-height:250px; _height:250px; border:1px solid #000; display:inline-block; *display:inline; *zoom:1; vertical-align:top;}

PS：
1、如果元素间本身就没有间隔，无论letter-spacing的值多小，元素都不会重叠；如果有空格间隙存在，letter-spacing就会发生重叠；
2、block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
3、inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
4、font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
5、letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。

三、两端对齐布局(列表最好使用block水平的元素)
css
ul{ text-align:justify; *text-justify:distribute; 或*text-justify:inter-ideograph; 或*text-justify:kashida;}

li{ display:inline-block; *display:inline; *zoom:1; vertical-align:top;}

.justify_fix { width:100%; height:0; vertical-align:top/bottom; overflow:hidden;}

PS：
1、现代浏览器下列表标签间需留空或换行；
2、列表尾部需添加一个.justify_fix 元素（或使用ul:after创建）；
3、如尾行需左对齐，.justify_fix 需改为 .left_fix
.left_fix{ height:0; overflow:hidden;}
需添加多个.left_fix 元素(个数理应最好等于每行子列表的个数-1 )


参考1：跨浏览器的inline-block
参考2：letter-spacing/空格间隙/字体/字体大小关系测试demo
参考3：text-justify实现更具语义化的图文列表布局
参考4：CSS深入理解vertical-align和line-height的基友关系