inline-block的用法

在css中用图片来做背景时免不了要用到inline-block。
通过将外包元素设置为inline-block，利用有inline的行级特性和block的指定高度和宽度的特性。
用法如下：

.icon{
  display:inline-block;
  /* ie8,firefox3,safari,opera */
  display:-moz-inline-stack;
  /* firefox2,-moz-inline-box其实也可以，但在某些情况下会有些异常-_-b */
  *display:inline;
  zoom:1;
  /*
  ie6,7，在ie中，如果该class应用在行内元素中的时候，
display:inline-block 会触发layout.
  从而使该元素拥有inline-block的特性，但为了考虑到通用性，
使其能在块元素中应用，所以使用zoom：1来触发layout
  */

  width:20px;
  height:20px;
  vertical-align:middle; /* 这个用来对opera的hack，使其垂直居中 */
  overflow:hidden; /* 针对ie，防止内容溺出，造成的高度及宽度改变 */
  background:url("bg.gif") -400px -680px;
}
.icon i{
  visibility:hidden; /* 将解释性文字隐藏 */
}

<a href="#" class="icon"><i>~这里解释性文字！~</i></a>