display:inline-block空隙解决方法及原因

display:inline-block空隙解决方法及原因
同学在做菜单的时候可能会用ul>li>a来实现横向的菜单;但在做的时候发现菜单与菜单直接有空隙;个人感觉应该是spacing之类的东西引起的根本原因。
解决方案有以下几种:
可以访问张鑫旭的空间看分析,这里不再赘述;
穿越门:点我穿越

解决方案

  1. 标签不闭合法 不推荐
  2. 字体变0法 还行
  3. margin负值法
  4. “整体化一”法,将源代码压缩至一行
  5. 代码注释法插入<!-- -->
  6. letter-spacing
  7. word-spacing
  8. 吸星大法 现成的解决方案
<!--方法①-->
.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
<!--方法②-->
li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}
来都来了,留个言吧🙂