inline-block样式间距

原始问题和解决方法请参考 淘宝UED官方博客:inline-block 前世今生

 

    布局时采用行内块display:inline-block,发现元素之间有空隙,原因是由于空白字符引起的,详细见上面链接.

    本网站首页采用了行内块,标记如下
    <ul>
            <li>
                    <a>(样式是 display:inline-block)
                    <a>(样式是 display:inline-block)
                    <a>(样式是 display:inline-block)
                    ...
            <li>
    </ul>
    a之间有空隙,a并没有边框、内补、外距等

有空隙 有空隙 有空隙

解决办法,参考自上面链接,并做过FF(32.0.3) IE6-11 chrome(版本 35.0.1916.114 m)的测试

    1.给父级元素设置 
        font-size:0         // 空隙的产生由于空白字符,所以将字体设为零,空白字符也没了.至于为什么,参考上面链接.
        *word-spacing:-1px; // 使IE6,7兼容,即使字体设0了,还是有1像素的间距
    2.给行内块元素设置
        display:inline-block;
        font-size:16px;     // 此处要重设字体大小
        vertical-align:top; // 行内块元素可设置这个对齐属性
        *display: inline;   // IE6,7
        *zoom:1;            // IE6,7

紧凑 紧凑 紧凑