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. ORACLE - 管理表空间和数据文件

    ORACLE表空间是一个逻辑分区,一个数据文件只能属于一个表空间,一个表空间可以拥有多个数据文件. 一般情况下,如果一个实例分配给多个应用使用,需要创建不同的表空间,每个用户使用自己的表空间. 一.表 ...

  2. 【原创】08. easyui form控件，回调参数存在后缀 audio controls="controls" style="display: none;"></audio>

    版本: jQuery EasyUI 1.4.3 springmvc 3.2.6 谷歌浏览器,内核版本 chrome 56.0.2924.87 360急速浏览器,内核版本 chrome 50.0.266 ...

  3. 关于Django的理解

    Django的理解 Django的核心是中间件, 所有的请求和响应都会经过中间件 中间件是一个钩子框架, 它们可以介入请求的响应处理过程, 它用于在全局修改Django的输入和输出 Django有以下 ...

  4. MapReduce编程之Reduce Join多种应用场景与使用

    在关系型数据库中 Join 是非常常见的操作,各种优化手段已经到了极致.在海量数据的环境下,不可避免的也会碰到这种类型的需求, 例如在数据分析时需要连接从不同的数据源中获取到数据.不同于传统的单机模式 ...

  5. 实现Qt日志功能并输出到文件(qDebug\qWarning\ qCritical\qFatal)

    <1>信息基本分类:qDebug : 调试信息提示qWarning : 一般的警告提示qCritical: 严重错误提示qFatal : 致命错误提示 <2>如何截获这些信息Q ...

  6. Jsp敏感词过滤

    Jsp敏感词过滤 大部分论坛.网站等,为了方便管理,都进行了关于敏感词的设定. 在多数网站,敏感词一般是指带有敏感政治倾向(或反执政党倾向).暴力倾向.不健康色彩的词或不文明语,也有一些网站根据自身实 ...

  7. [Oracle Support]PeopleSoft Support中Fixes,Patches,Bundles,Packs？

    在Oracle Support中经常能看到下面术语,一起学习下. Fixes - 最小单元的维护,修复通常会解决一个特定的问题,例如:oracle可能会给您一个解决生产问题的解决方案. Patches ...

  8. 每个Web开发人员应该知道的12个终端命令

    Tips 原文作者:Danny Markov 原文地址:12 Terminal Commands Every Web Developer Should Know About 终端是开发人员的武器库中最 ...

  9. EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

    EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...

  10. fiddler mock ==> AutoResponder

    背景 做过测试的同学,肯定都听过fiddler的大名,抓包工具,app抓包 下载传送门(https://www.telerik.com/download/fiddler) 抓包使用这里就不复述了,这次 ...