解决两个相邻的span中间空隙的几种方式

思路：将父元素字体大小设置为0，子元素中设置字体正确大小，即可实现效果

div{
   font-size:0;
}
div span {
   font-size:16px;
}

<style>
   span{background: red;float:left}
</style>
<span>1</span>
<span>2</span>

<style>
   span{background: red;}
</style>
<div class="wrap">
    <span>a</span><!--
      --><span>b</span>

<style>
    .wrap{font-size: 12px;}
   span{background: red;margin-right:-3px}
</style>
<div class="wrap">
    <span>a</span>
    <span>b</span>
</div>

这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-3px”就不能解决问题

<style>
   span{background: red;}
</style>
<div class="wrap">
    <span>a
    <span>b
</div>

这种方法虽然能达到各浏览器的兼容，但还是有一个前提，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了。

#demo{
	*padding-left:1px;
	font-size:0;
}
#demo span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	*margin-left:-1px;
	font-size:14px;
}

针对IE7及以下浏览器hack，让每个inline-block的span元素向左负margin一个像素，借此修复IE7及以下浏览器下顽固的残留1px间隙问题。由于span向左margin了-1px，同时需将父元素#demo向左padding 1px，用于抵消位置偏移。

IE, Firefox, Opera, Safari6, Chrome18均可直接使用此方案；

#demo{
	*word-spacing:-1px;
	font-size:0;
}
#demo span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	word-spacing:normal;
	font-size:14px;
}

我们知道inline-block之间的间隙是因插入了空白换行或回车符所致，你可能很快就能想起有个word-spacing属性是用来处理单词间空白符的。针对IE7及以下浏览器hack，定义word-spacing为-1px，即可修复IE7及以下浏览器下顽固的残留1px间隙问题。

IE, Firefox, Opera, Safari6, Chrome18均可直接使用此方案；