1. 行内元素之间产生水平空隙的原因:代码中有意或无意的添加了换行符,tab(制表符)或者空格等字符引起的;
2. 解决方案:
- 删除引起问题的换行符,制表符或者空格等,但是缺点是会使代码结构混乱;
- 设置margin属性为负数,如:margin-left: -3px;缺点是负数的值不确定,得具体情况具体分析,不推荐;
- 在行内元素之间添加HTML注释注释符号;<!---->
1 <div> 2 <span>行内元素</span><!-- 3 --><span>行内元素</span><!-- 4 --><span>行内元素</span><!-- 5 --><span>行内元素</span> 6 </div>
缺点是这样写会增加代码量,代码结构也会受影响;
- 设置font-size: 0; 用于消除换行符、tab(制表符)、空格等字符造成的影响,但需注意以下几点:
1. IE6,IE7浏览器当设置font-size:0时,换行符、tab(制表符)、空格始终存在1px的空隙;
2. 最新版本的Safari浏览器,Chrome浏览器不支持font-size: 0;;
解决方法如下:
1. 针对IE6、7浏览器,使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔),即: word-spacing:-1px;
2. 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px, html{-webkit-text-size-adjust:none;}
css代码如下:
html{ -webkit-text-size-adjust: none;/* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */ } div { font-size: 0;/* 所有浏览器 */ *word-spacing: -1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */ } span { font-size: 12px; letter-spacing: normal;/* 设置字母、字间距为0 */ word-spacing: normal; /* 设置单词、字段间距为0 */ }