如何解决两个相邻的span中间空隙

产生间隙原因: 换行或空格会占据一定的位置。

1.span直接在一行，没有空格

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

这种方案是最直接的解决方案，但却也是最不靠谱的方案，存在很多不可控因素。很多场景会让你崩溃：前后端协同；版本更迭；他人接手；自己忘了…，太多一不小心都可能让这个方案失效。尤其对于有代码洁癖的前端来说，这种方式简直让人难以忍受

2.span加float

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

3.给父元素加font-size:0;子元素再加上font-size

<style>
    .wrap{font-size: 0}
   span{background: red;font-size: 12px;}
</style>
<div class=\"wrap\">
    <span>1</span>
    <span>2</span>
</div>

该方案存在的问题，font-size要被overwrite一次；IE7及以下浏览器依然会残留1px的间隙；较老版本的webkit对小于12px的font-size设置不友好: chrome还可以设置-webkit-text-size-adjust:none用以支持超小字体，Safari即使设置了也无力；

IE8及以上浏览器, Firefox, Opera, Safari6, Chrome18均可直接使用此方案；

4.使用注释

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

5.负margin

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

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

6.丢失结束标签

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

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

7.兼容IE:font-size+负margin

#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均可直接使用此方案；

8.兼容IE:font-size+word-spacing

#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均可直接使用此方案；