html/css解决inline-block内联元素间隙的多种方法总汇
序
display有几种属性：
inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置；
block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义；
为了弥补inline和block的不足，又扩充了inline-block属性；inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈递。
但是display:inline-block;在IE6/7中不兼容：解决办法：
1 display:inline-block;*dsiplay:inline;*zoom:1;
为什么会有间隙
inline元素之间本身就存在间隙，是不是这个间隙引起的呢？最终原因是由于inline元素中间的空白符引起的，解决办法：就是去掉空白符。
解决方案
1、改变书写结构
1 <ul> 2 <li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li> 3 </ul> 4 <ul> 5 <li> 6 item1</li><li> 7 item2</li><li> 8 item3</li><li> 9 item4</li><li> 10 item5</li> 11 </ul> 12 <ul> 13 <li>item1</li 14 ><li>item2</li 15 ><li>item3</li 16 ><li>item4</li 17 ><li>item5</li> 18 </ul> 19 <ul> 20 <li>item1</li><!-- 21 --><li>item2</li><!-- 22 --><li>item3</li><!-- 23 --><li>item4</li><!-- 24 --><li>item5</li> 25 </ul>
以上几种均可以完美的达到去除间隙的作用。但是，从代码的可读性上看，或多或少有一些不足。如果使用到了打包工具或者自写脚本，在上线前将响应HTML代码打包成一行，即可。
2、使用font-size:0
1 .space { 2 font-size: 0; 3 -webkit-text-size-adjust:none;//兼容Chrome 4 } 5 .space a { 6 font-size: 12px; 7 }
基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加： -webkit-text-size-adjust:none;
3、使用margin负值
1 @media screen and (-webkit-min-device-pixel-ratio:0) { div { margin-right: -8px; } }/*谷歌 HACK 方法*/
除谷歌外的其他浏览器间隙是4px，使用margin:-4px; 唯独谷歌是 双倍的8px，需要给谷歌单独设置 margin:-8px;
4、使用letter-spacing或word-spacing
1 .space { 2 letter-spacing: -3px; 3 } 4 .space a { 5 letter-spacing: 0; 6 }
该方法基本可以搞定所有浏览器 ，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。
1 .space { 2 word-spacing: -6px; 3 display: inline-table;/*兼容Chrome*/ 4 } 5 .space a { 6 word-spacing: 0; 7 }
word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。
5、丢失结束标签
1 <ul> 2 <li>item1 3 <li>item2 4 <li>item3 5 <li>item4 6 <li>item5 7 </ul>
此方法虽然可以解决此问题，但是在Doctype为xhtml时将报错，所有方法是否适用须视情况而定。
6、W3C推荐 导航方法（兼容IE6等）
1 <style type="text/css"> 2 body,div,h1,ul,li{margin:0; padding:0;} 3 ul,li{list-style:none;} 4 a{text-decoration: none;} 5 .nav a{background: red;color:#fff;padding: 10px 20px;margin-right: -4px;line-height: 40px;*margin-right: -8px;/* ie 下面也是 -8px*/} 6 @media screen and (-webkit-min-device-pixel-ratio:0) { .nav a { margin-right: -8px; } }/*谷歌 HACK 方法*/ 7 .nav ul li{display:inline;} 8 .nav a:hover{text-decoration: underline;} 9 </style> 10 <div class="nav"> 11 <ul> 12 <li><a href="#">首页</a></li> 13 <li><a href="#">服装城</a></li> 14 <li><a href="#">食品</a></li> 15 <li><a href="#">团购</a></li> 16 <li><a href="#">夺宝岛</a></li> 17 <li><a href="#">闪购</a></li> 18 <li><a href="#">金融</a></li> 19 </ul> 20 </div>
办公资源网址导航 https://www.wode007.com
不使用hack方法的话，每个li紧挨着即可，不要留空格等间隙。
7、YUI 3 CSS Grids的处理
1 .yui3-g { 2 letter-spacing: -0.31em; /* webkit */ 3 *letter-spacing: normal; /* IE < 8 重置 */ 4 word-spacing: -0.43em; /* IE < 8 && gecko */ 5 } 6 .yui3-u { 7 display: inline-block; 8 zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */ 9 letter-spacing: normal; 10 word-spacing: normal; 11 vertical-align: top; 12 }
8、其他方法
1 li { 2 display:inline-block; 3 background: orange; 4 padding:10px; 5 word-spacing:0; 6 } 7 ul { 8 width:100%; 9 display:table; /* 调教webkit*/ 10 word-spacing:-1em; 11 } 12 13 .nav li { *display:inline;}
结语
其他去除间距的方法肯定还有，欢迎大家通过评论方式进行补充。
