display:inline-block再总结

又一次遇到display:inline-block的问题。我已经厌倦了每次遇到状况就抓住float属性这根救命稻草，CSS有许多非常卓越的属性，display:inline-block就是其中之一，唯一的无奈是IE6和IE7对它的支持非常烂。假设要实现下图中的效果：

彩色小图标是一个投票链接，在不浮动它同时有效显示背景图标的情况下，使用display:inline-block;应该是个不错的选择。根据定义，display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。这意味着它既可以像块对象那样有效地被指定宽度高度和背景图片，又能够像内联对象一样不换行。那么比较正确的做法应该是：

.vote{
display:inline-block;
display:-moz-inline-stack;
*display:inline;
zoom:1;
line-height:9999em;
overflow:hidden;/* 隐藏溢出的内容 */
font-size:0;
vertical-align:middle;* 行内垂直居中，针对 Opera 比较大的偏离 */
margin:10px;
width:100px/*任意非auto值*/
height:100px;/*任意非auto值*/
background:url(img/2.jpg) no-repeat 0 0;
}

其中，Firefox3 beta、IE8 、Opera、Safari 支持display:inline-block属性，而IE6/IE7/FF2不识别。通过display:-moz-inline-stack;可以使FF2支持display:inline-block。
而对IE6/IE7先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，可使块元素呈递为内联对象，从而实现类似display:inline-block;的效果。见怿飞的分析

至此，问题基本解决，背景图片显示正常。接下来的问题是隐藏链接文字。按照以往的做法是使用类似text-indent:-9999px;这样非常大的值将文字推到页面以外。但是该做法似乎只适用于高级浏览器，在IE6/IE7下，整个元素连同背景图都消失了。更妥善的办法是将line-height和font-size联合起来解决这个问题，但是我发现，在font-size为0时，IE6/IE7仍会显示非常细微的文字，无法彻底消除。不知道其他同行有没有遇到过类似的问题。。。

参考阅读：

秦歌的display:inline-block的应用两例和CSS{display:inline-block}；
怿飞的display:inline-block的深入理解和模拟兼容性的 inline-block 属性；
乌龙茶的inline-block从入门到精通
前端观察的臭番茄的：跨浏览器的inline-block 
display:inline-block的几个应用及bug：http://www.css88.com/archives/1465