黑马程序员技术交流社区

标题: 【上海校区】行内元素产生水平空隙的原因及解决方案 [打印本页]

---

作者: 上海前端-达达    时间: 2018-8-1 19:36
标题: 【上海校区】行内元素产生水平空隙的原因及解决方案
最近发现行内元素有时会莫名其妙的产生水平空隙，开始以为是外边距导致的，于是把所有的行内元素外边距都设置为0，结果还是存在，代码如下

[JavaScript] 纯文本查看 复制代码

<div class="span-wrap">

    <span>行内元素</span>

    <span>行内元素</span>

    <span>行内元素</span>

    <span>行内元素</span>

    <span>行内元素</span>

    <span>行内元素</span>

</div>

最终发现行内元素之间产生空隙的，是由于换行符、tab（制表符）、空格等字符引起。


下面提供了四种解决方案：
方法一：暴力删除行内元素之间的换行符、tab（制表符）、空格等字符

[JavaScript] 纯文本查看 复制代码

<div class="span-wrap"><span>行内元素</span><span>行内元素</span><span>行内元素</span><span>行内元素</span><span>行内元素</span><span>行内元素</span></div>

这种方法会造成代码堆成一堆，看起来很不舒服，影响阅读


方法二：利用HTML注释

[JavaScript] 纯文本查看 复制代码

<div class="span-wrap">

       <span>行内元素</span><!--

    --><span>行内元素</span><!--

    --><span>行内元素</span><!--

    --><span>行内元素</span><!--

    --><span>行内元素</span><!--

    --><span>行内元素</span>

</div>

这种方法不仅增加了代码量，而且影响了HTML的代码结构


方法三：指定margin属性为负数

[JavaScript] 纯文本查看 复制代码

.span-wrap span{

        margin-left: -4px;

    }

这是最糟糕的方案了，因为你必须根据具体情况去计算，有时还不对，你应该尽量避免这样做。

方法四：设置font-size：0，消除换行符、tab（制表符）、空格等字符

使用此方法时需要注意两点：

1.IE6，IE7浏览器当设置font-size：0时，换行符、tab（制表符）、空格始终存在1px的空隙
2.最新版本的Safari浏览器，Chrome浏览器不支持字体大小为0的浏览器

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

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

2.使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px
html{-webkit-text-size-adjust:none;}

css代码如下：

[CSS] 纯文本查看 复制代码

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 */

 }

转载：https://blog.csdn.net/u010600693/article/details/51505476

---

作者: 不二晨    时间: 2018-8-2 17:36
奈斯，棒棒哒

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2