產(chǎn)生間隙原因: 換行或空格會(huì)占據(jù)一定的位置。

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

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

這種方案是最直接的解決方案，但卻也是最不靠譜的方案，存在很多不可控因素。很多場(chǎng)景會(huì)讓你崩潰：前后端協(xié)同；版本更迭；他人接手；自己忘了…，太多一不小心都可能讓這個(gè)方案失效。尤其對(duì)于有代碼潔癖的前端來說，這種方式簡(jiǎn)直讓人難以忍受

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及以下瀏覽器依然會(huì)殘留1px的間隙；較老版本的webkit對(duì)小于12px的font-size設(shè)置不友好: chrome還可以設(shè)置-webkit-text-size-adjust:none用以支持超小字體，Safari即使設(shè)置了也無力；

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

4.使用注釋

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

5.負(fù)margin

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

這種解決方法并不完美，如果你的父元素設(shè)置的字號(hào)不一樣，可能你的“-3px”就不能解決問題

6.丟失結(jié)束標(biāo)簽

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

這種方法雖然能達(dá)到各瀏覽器的兼容，但還是有一個(gè)前提，那就是“DOCTYPE”要選擇對(duì)，在“XHTML”下可就問題又出來了。

7.兼容IE:font-size+負(fù)margin

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

針對(duì)IE7及以下瀏覽器hack，讓每個(gè)inline-block的span元素向左負(fù)margin一個(gè)像素，借此修復(fù)IE7及以下瀏覽器下頑固的殘留1px間隙問題。由于span向左margin了-1px，同時(shí)需將父元素#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之間的間隙是因插入了空白換行或回車符所致，你可能很快就能想起有個(gè)word-spacing屬性是用來處理單詞間空白符的。針對(duì)IE7及以下瀏覽器hack，定義word-spacing為-1px，即可修復(fù)IE7及以下瀏覽器下頑固的殘留1px間隙問題。

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

總結(jié)

以上是生活随笔為你收集整理的如何解决两个相邻的span中间空隙的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。