1回答

• 

  qyx1994

  2016-03-15 11:49:55

  已采纳

  文／坏小朱啦啦（简书作者）
  原文链接：http://www.jianshu.com/p/50e6cb9aeed6
  著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
  

  行内元素之间会产生间隙bug问题的场景：
  

  1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

  如下代码：

  <div>

  <a>1</a>

  <a>22</a>

  <em>333</em>

  </div>

  解决办法有两种

  方法一：将元素写成一行，中间不换行；
  

  <div><a>1</a><a>22</a><em>33</em></div>

  方法二：设置font-size:0

  div{font-size:0px;}

  a,em{font-size:10px;}

  方法三：可以为元素设置负margin值，一般为-4，但是根据父级元素的font-size会有相应的变化，使得元素间隙消失

  a,em{font-size:10px;margint-right:-4px;}

  这个方法对于盒模型比较怪异的IE6/7来说另当别论。
  

  方法四：省略闭合符号

  <div>

  <a>1

  <a>22

  <em>333

  </div>

  当然，还有让内联元素浮动float：left;的办法，此时父级容器需要设置宽高，才好定位内联元素的位置。感兴趣的朋友可以一试。

  
  

  1 6

  JChing

  非常感谢！

  2016-03-16 09:46:23

  共 1 条回复 >