【转】行内元素和inline-block产生的水平空隙bug

重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码:

<div class=“”><span class=“bgr”>去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span><span class="bgr">去掉了间距</span></div>

然而删除间距后,代码堆成了一片,看得起很不舒服,特别是从重构转给JS同事后,JS同事看完代码后就会提出抱怨,代码太乱,他们更希望看到的是这样的代码:

<div class="">
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
</div>

其实,给JS同事带来的清晰的、方便阅读和修改的代码,也是重构工程师能力的体现。

 

了解行内元素产生水平间距的原因有助于我们解决这个问题,那么产生这些间距的原因是什么呢?

1.行内元素之间的“换行符”产生间距

<div class="">
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

2.行内元素之间使用“tab(制表符)”产生间距

<div class="">
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
  <span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

3.行内元素之间使用“空格”产生间距

<div class=""><span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
<span class="bgr">换行符产生间距</span> <span class="bgr">换行符产生间距</span>
</div>

展现效果如下:

 

上以上3点可以看出,行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制。

那么改变字体的大小可调整行内元素的间距么?

 

上图把字体从0px~18px~36px的调整,可见行内元素之间的水平间距从无到有,并不断变大,说明行内元素之间产生间距是由换行符、tab(制表符)、空格等字符引起的,那么设置字体大小font-size:0可以是不是可以在所有浏览器中除去这些间距呢?

经过测试后,可发现设置font-size:0并不能使得换行符、tab(制表符)、空格等在所有浏览器中产生的额外间距消失:

1.IE6、7浏览器始终存在的 1px 空隙

2.最新版本的Safari浏览器(5.1.7)不支持定义字体大小为 0 的浏览器

通过查找资料后,一种比较正常的解决方法如下:

1.针对IE6、7浏览器,使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔)

*word-spacing:-1px;

2.使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px

html{-webkit-text-size-adjust:none;}

问题解决了,代码如下:

结构:
<div class="span-wrap">
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
    <span>字符产生间距</span>
</div>

样式:
html{
  -webkit-text-size-adjust:none;/* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */
} .span-wrap { font-size:0;/* 所有浏览器 */ *word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */ } .span-wrap span{ font-size: 12px; letter-spacing: normal;/* 设置字母、字间距为0 */ word-spacing: normal; /* 设置单词、字段间距为0 */ }

有些同学会问为什么要这么复杂,干脆直接使用浮动,简单,也不用写多余的hack,多好。

不可否认,使用浮动技术是比较好的办法,实际工作中我们使用浮动也是比较多,但是也并不是每处地方都要使用浮动,而且使用浮动后还需要清除浮动的操作。

工作中,我们可不断尝试使用”新办法“来解决问题,保持追求”时尚“的精神,不断丰富的知识面。好的代码也方便更好的团队合作,也是体现自己能力的一项指标。

 

posted @ 2014-08-13 11:37  dtdxrk  阅读(320)  评论(0编辑  收藏  举报