span i s等行內元素標簽之間出現奇怪空格符號

 

上述展開信息本來是這樣寫的，但是很奇怪windows下的測試環境支付時間前面莫名其妙多了個小方框

 <p>
      <span><i>收貨人:</i>{remark.name}</span>
      <span><i>收貨手機號:</i>{remark.phone}</span>         
      <span><i>收貨地址:</i>{remark.address}</span>
      <span><i>支付時間:</i>{remark.payTime}</span>                                                                
  </p> 

 

一般是由於行內元素之間在換行時會產生一個換行符號，然后會占用一定的寬度，並且這個寬度是小於一個空格的.

 

解決方法如下：

1.將span元素寫在一行，但是較多的話看着就不方便了；

2.js里拼接字符串，再用innerHtml顯示出來， 使用一些組件就不好拼接了；

3.將換行元素的父元素字體大小設為：font-size:0 ，前提是得瀏覽器支持這個屬性；

4.這樣寫：

 <p>
      <span><i>收貨人:</i>{remark.name}</span
      ><span><i>收貨手機號:</i>{remark.phone}</span
      ><span><i>收貨地址:</i>{remark.address}</span
      ><span><i>支付時間:</i>{remark.payTime}</span>                                                                
  </p> 

 

然而，我遇到的bug不一般，用以上的方法統統無效，為啥呢 ???

原來是因為我的span與i標簽之間看似沒有空格，實則有個隱形的的空格（就是按左右鍵得兩下才能移過那個小箭頭），

於是，把span標簽重寫一遍就好啦，莫名的小空格～～～