display:inline-block 是让块级元素变成行内元素 在一行显示，

然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，所以名义上firefox是支持display:inline-block的，除此之外，伟大的chrome、Opera、Safari都能很好地支持。尽管如此，依然还是可以通过hack的手段让ie6、7两位难兄难弟变得温顺，

看段代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    .box{ width: 500px; background: #cacaca; margin: 10px auto;}

    .box ul{

        width: 100%;

        margin: 0;

        padding: 0;

        list-style: none;

    }

    .box ul li{

        width: 16.6%;

        display: inline-block;

        *display:inline;

        *zoom:1;

        text-align: center;

        background: #cf2d28;

        margin: 0;

        padding: 0;

    }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

        </ul>

    </div>

</body>

</html>

很简单 想也能想到出现什么布局，需要解释的是，display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。看下和我们想的是不是一样，

纳尼，按照想的应该全部紧密的排在一行啊，为什么会用空隙；

答案就是：块级元素允许空格出现，换行符在这里包含了换行在内的空格符。

解决方法：1、让代码写在一起，2，在父级元素添加 font-size:0; 然而设置为0后子元素大小都没了，需要在子元素再重新设置字体大小font-size:12px;

    <style type="text/css">

    .box{ width: 500px; background: #cacaca; margin: 10px auto;}

    .box ul{

        width: 100%;

        margin: 0;

        padding: 0;

        list-style: none;

        font-size: 0;

    }

    .box ul li{

        width: 16.6%;

        display: inline-block;

        *display:inline;

        *zoom:1;

        text-align: center;

        background: #cf2d28;

        margin: 0;

        padding: 0;

        font-size: 12px;

    }

    </style>

看下效果

perfect，即使右边有一点没有占全，也是在预算之内，因为100/6=26.6666.... 我们只取26.6%，故会有点空隙。

好的这样做在ie 谷歌 ff等浏览器是没问题了 可是在safari中间隙还是存在，为解决此问题 使用letter-spacing:-Npx 来兼容safari

<style type="text/css">

    .box{ width: 500px; background: #cacaca; margin: 10px auto;}

    .box ul{

        width: 100%;

        margin: 0;

        padding: 0;

        list-style: none;

        font-size: 0;

        letter-spacing: -4px;/*根据不同字号做不同调整*/

        word-spacing: -4px;

    }

    .box ul li{

        width: 16.6%;

        display: inline-block;

        *display:inline;

        *zoom:1;

        text-align: center;

        background: #cf2d28;

        margin: 0;

        padding: 0;

        font-size: 14px;

        letter-spacing:normal;

        word-spacing:normal;

    }

    </style>

OK，更多解决方案 请参考文档

display:inline-block间隙问题的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. 一种轻便且灵活的js模板的思路

    一种轻便且灵活的js模板的思路 项目地址:https://github.com/j20041426/template 思路背景 在Vue.React.Angular等大前端框架异军突起的今天,写前端时 ...

  2. jQuery实现拼图小游戏

    小熊维尼拼图                                                                                    2017-07-23 ...

  3. Asp.net中,从弹出窗体取选择值(转)

    在Asp.net中,从A页面中弹出B页面,在B页面中选择数据后,关闭并将数据更新到A页面,是一种常用 的方式.只是我对Javascript不熟悉,所以捣鼓了一下午,终于有了一点成绩:测试项目有两个页面 ...

  4. 2.ssh密钥登陆（ssh无密码登陆）

    1.A主机生成密钥对 ssh-keygen  -t  rsa 2.将A主机的公钥发给B主机 scp  id_rsa.pub  linux2:/cloud                         ...

  5. websocket 70K连接测试

    websocket 70K连接测试 最近使用socket.io做了一个实时应用,实时性.稳定性还是很让人满意的.如果拿socket.io来做小型应用,综合效率应该是最高的.但是网上少有socket.i ...

  6. Loadrunner分布式测试

    据经验,每生成一个虚拟用户,需要花费负载生成器大约 2M-3M 的内存空间.通常运行 controller的主机很少用作负载生成器.负载生成器的工作多由其他装有 LR Agent的PC 机来担任.如果 ...

  7. jsp隐藏关键 敏感信息，只显示前后字段

    今天写jsp页面,要求对字段中间部分隐藏,只显示前几位和后几位.搜了一下发现网上大都是隐藏前面指定字段,或者是利用正则表达式隐藏手机号或是身份证.这样的话必须预先知道字段长度,而我不想知道长度只显示前 ...

  8. Linux操作系统-命令-netstat

    # 之前已经写过了3篇与＂性能测试＂有关系的Linux命令,它们分别是free.top.vmstat # 接下来还需要把另外2个命令也写下来:netstat和iostat 最近认真地读了1篇关于＂定位 ...

  9. layer弹出层传值到父页面

    目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).r ...

  10. 从FMDB到WCDB、微信团队怎么说?

    WCDB背景 自己初次见到WCDB是微信开发团队公众号在今年五月份推送的一篇文章中(开发者团队的微信号上面图片中有,值得大家关注一下),那时候就说在筹备着WCDB的开源,觉得很是新奇,在两个多月前WC ...