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的基友关系

button按钮宽度兼容性

项目中的需求：要求按钮左右边距为 5px；最小宽度为 50px(即按钮最小宽度为 60px)，兼容各浏览器。

效果
a标签 撑开撑开撑开撑开



CSS
input{ margin:0; padding:0; border:0; font:normal 12px/20px "\5b8b\4f53"; vertical-align:middle; } //input css reset

.button{
padding:0 5px; //左右内边距 5px
display:inline-block; *display:inline; *zoom:1;
min-width:50px; width:auto !important; width:50px; //最小宽度 50px
height:20px;
white-space:nowrap; //解决ie6折行的问题
*overflow:visible; //设置这个属性IE6/7下padding才会生效
color:#fff; text-align:center; background-color:#327E33; cursor:pointer;
}

input.button{ min-width:60px; width:auto !important; width:60px;
min-width:50px\0; //ie8 hack
_line-height:15px; //ie6 hack
}

@-moz-document url-prefix(){
input.button{ padding:0 2px; min-width:60px;} //firefox input内左右文字有 3px的间距
}//火狐hack

“Firefox强行把按钮内文本的行高设置为normal，这个值在Firefox里默认为15px”

效果
按钮按钮

css
.btn_img{
padding:0 10px; //左右内边距为 10px
border:1px solid #ccc;
display:inline-block; *display:inline; *zoom:1;
min-width:68px; width:auto !important; width:68px; height:18px;
*vertical-align:middle; //修复按钮在 ie6/7下的垂直显示
font:normal 12px/18px "\5b8b\4f53"; color:#36c; text-align:center; background-color:#F5F5F5; cursor:pointer;
}

.btn_img img{
margin-right:5px;
margin-top:1px; vertical-align:top;
*margin-top:0; _padding-bottom:1px; *vertical-align:middle; //ie6/7中图片后面的文字也会显示问题
width:16px; height:16px;
}

.btn_img:hover{ color:#36c; text-decoration:none; background-color:#fff;}

文本框(input)垂直居中(未测试)
padding:3px 1px 0;font:16px/16px arial;vertical-align:middle;

padding:3px 1px 0;font:行高值px/行高值px arial;vertical-align:middle;