inline-block元素间间隙产生及去除详

参考博文：

参考博文：inline-block元素间间隙产生及去除详
参考问题解答：这几个span之间为什么会有空隙呢？

问题缘由：

编辑器的换行符会被解析成空格显示。

解决方案：

一、一行写

二、用注释或者是写法变化

<div id="right">
  <span>1</span><!--
  --><span>2</span><!--
  --><span>3</span><!--
  --><span>4</span>
</div>

<span>1</span
><span>2</span
><span>3</span
><span>4</span>

三、inline-block 的元素float:left;

四、在父元素上加font-size:0;子元素再加上font-size

right{ 240px;height: 50px;font-size:0;}

right span{ 60px;height: 50px;display: inline-block;background-color: blue;font-size:12px;}

** 这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在。

五、

最终兼容解决方案：