html/css解决inline-block内联元素间隙的多种方法总汇

序

display有几种属性：
inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置；
block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义；
为了弥补inline和block的不足，又扩充了inline-block属性；inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈递。

但是display:inline-block;在IE6/7中不兼容：解决办法：

 display:inline-block;*dsiplay:inline;*zoom:;

为什么会有间隙

inline元素之间本身就存在间隙，是不是这个间隙引起的呢？最终原因是由于inline元素中间的空白符引起的，解决办法：就是去掉空白符。

解决方案

1、改变书写结构

 <ul>
     <li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li>
 </ul>
 <ul>
     <li>
         item1</li><li>
         item2</li><li>
         item3</li><li>
         item4</li><li>
         item5</li>
 </ul>
 <ul>
     <li>item1</li
     ><li>item2</li
     ><li>item3</li
     ><li>item4</li
     ><li>item5</li>
 </ul>
 <ul>
     <li>item1</li><!--
   --><li>item2</li><!--
   --><li>item3</li><!--
   --><li>item4</li><!--
   --><li>item5</li>
 </ul>

以上几种均可以完美的达到去除间隙的作用。但是，从代码的可读性上看，或多或少有一些不足。如果使用到了打包工具或者自写脚本，在上线前将响应HTML代码打包成一行，即可。

2、使用font-size:0

 .space {
     font-size: ;
    -webkit-text-size-adjust:none;//兼容Chrome
 }
 .space a {
     font-size: 12px;
 }

基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加： -webkit-text-size-adjust:none;

3、使用margin负值

 @media screen and (-webkit-min-device-pixel-ratio:) { div { margin-right: -8px; } }/*谷歌 HACK 方法*/

除谷歌外的其他浏览器间隙是4px，使用margin:-4px; 唯独谷歌是 双倍的8px，需要给谷歌单独设置 margin:-8px;

4、使用letter-spacing或word-spacing

 .space {
     letter-spacing: -3px;
 }
 .space a {
     letter-spacing: ;
 }

该方法基本可以搞定所有浏览器 ，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。

 .space {
     word-spacing: -6px;
    display: inline-table;/*兼容Chrome*/
 }
 .space a {
     word-spacing: ;
 }

word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

5、丢失结束标签

 <ul>
     <li>item1
     <li>item2
     <li>item3
     <li>item4
     <li>item5
 </ul>

此方法虽然可以解决此问题，但是在Doctype为xhtml时将报错，所有方法是否适用须视情况而定。

6、W3C推荐 导航方法（兼容IE6等）

 <style type="text/css">
         body,div,h1,ul,li{margin:; padding:;}
         ul,li{list-style:none;}
         a{text-decoration: none;}
         .nav a{background: red;color:#fff;padding: 10px 20px;margin-right: -4px;line-height: 40px;*margin-right: -8px;/* ie 下面也是 -8px*/}
         @media screen and (-webkit-min-device-pixel-ratio:) { .nav a { margin-right: -8px; } }/*谷歌 HACK 方法*/
         .nav ul li{display:inline;}
         .nav a:hover{text-decoration: underline;}
 </style>
 <div class="nav">
         <ul>
             <li><a href="#">首页</a></li>
             <li><a href="#">服装城</a></li>
             <li><a href="#">食品</a></li>
             <li><a href="#">团购</a></li>
             <li><a href="#">夺宝岛</a></li>
             <li><a href="#">闪购</a></li>
             <li><a href="#">金融</a></li>
         </ul>
 </div>

办公资源网址导航 https://www.wode007.com

不使用hack方法的话，每个li紧挨着即可，不要留空格等间隙。

7、YUI 3 CSS Grids的处理

 .yui3-g {
     letter-spacing: -.31em; /* webkit */
     *letter-spacing: normal; /* IE < 8 重置 */
     word-spacing: -.43em; /* IE < 8 && gecko */
 }
 .yui3-u {
     display: inline-block;
     zoom: ; *display: inline; /* IE < 8: 伪造 inline-block */
     letter-spacing: normal;
     word-spacing: normal;
     vertical-align: top;
 }

8、其他方法

 li {
     display:inline-block;
     background: orange;
     padding:10px;
     word-spacing:;
     }
 ul {
     width:%;
     display:table;  /* 调教webkit*/
     word-spacing:-1em;
 }

 .nav li { *display:inline;}

结语

其他去除间距的方法肯定还有，欢迎大家通过评论方式进行补充。