最近发现行内元素有时会莫名其妙的产生水平空隙,开始以为是外边距导致的,于是把所有的行内元素外边距都设置为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
|