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. Linux服务器中安装Oracle

    笔者手动安装成功 一,oracle安装前的准备与配置 1,修改stsctl.conf文件 Linux是为小文件设计的,Oracle数据库安装需要占用较多资源,要把各项参数调大. 使用vi编辑/etc/ ...

  2. 18. leetcode 387. First Unique Character in a String

    Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...

  3. OpenCV1.0在VC ++6.0下的配置

    1.本人使用win7操作系统,首先要预装VC++6.0,安装方法不再赘述. 2.在OpenCV官方网站下载OpenCV的安装文件"OpenCV_1.0.EXE"(参考链接:http ...

  4. JavaScript中正则表达式判断匹配规则以及常用的方法

    JavaScript中正则表达式判断匹配规则以及常用的方法: 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想 ...

  5. 记Angular与Django REST框架的一次合作（2）：前端组件化——Angular

    注:这是这个系列的第二部分,主要集中在Angular的使用方面.之前使用过AngularJS(Angular 1.x),混在Django的模板中使用,这些页面一般完全是结果展示页.在有Django表单 ...

  6. hdu--1045--Fire Net,NYOJ--587--dfs--blockhouses

    /* Name: NYOJ--587--blockhouses Author: shen_渊 Date: 16/04/17 21:43 Description: dfs,逐个点深度优先搜索,不管能不能 ...

  7. 【我的漫漫跨考路】有生之年·调完了BUG--冒泡排序C++版本

    正文之前 今天去牛客网试了试一些实战编程题,感觉贼有意思,但是也很难,挑了个成绩排序的算法题我就开始怼! 对我一个编程经验并不是很丰富的人来说,确实算是个挑战了. 所以我满满当当的搞了四个小时多,才算 ...

  8. 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD

    在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...

  9. 再学ajax--第一天

    今天写这个帖子就是是前几天在学ES6在学到Promise实现AJAX操作时,发现对ajax的一些知识点有些遗忘,所以就回头重新复习了一遍ajax,温故而知新. 主要有从4个方面去复习ajax,分析不透 ...

  10. Java 脚本引擎

    脚本引擎,就是一个编程语言的解释器,它的功能是解释执行用户的程序文本,将它译成计算机能执行的机器代码,完成一系列的功能. Java脚本引擎简单地说就是指Java提供的一组兼容操作各种脚本语言的的API ...