行内元素之间产生的间隙

学习总结:

间隙是如何产生的:换行符,tab(制表符),空格符等造成的

如何去除(方法之一):用font-size:0px来消除换行符,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;}

使用方法

HTML


            行内元素
            行内元素
 

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


 

你可能感兴趣的:(行内元素之间产生的间隙)