原始问题和解决方法请参考 淘宝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