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. Python爬虫初学（一）—— 爬取段子

    最近开始学Python的爬虫,是在这个博客跟着学习的,该博主用的是Python 2.7版本,而我使用的是3.5版本,很多不兼容的地方,不过没关系,自己改改就好了. 我们想针对网站的内容进行筛选,只获取 ...

  2. zabbix前台jsrpc注入

    zabbix是一个开源的企业级性能监控解决方案. 官方网站:http://www.zabbix.com zabbix的jsrpc的profileIdx2参数存在insert方式的SQL注入漏洞,攻击者 ...

  3. 聪聪和可可[NOI2005]

    [问题描述] 在一个魔法森林里,住着一只聪明的小猫聪聪和一只可爱的小老鼠可可.虽然灰姑娘非常喜欢她们俩,但是,聪聪终究是一只猫,而可可终究是一只老鼠,同样不变的是,聪聪成天想着要吃掉可可. 一天,聪聪 ...

  4. 一个想法照进现实-《IT连》创业项目：一个转折一个反思

    前言: 距离上一篇介绍IT连创业项目的文章,已经过去2个月了,没想到我竟然这么久没写文章向大伙汇报进度了,实在抱歉. 关于这事,我得好好反省,认真检讨,好好写文,哈. 今天主要是讲述一下最近创业的进展 ...

  5. 教你用python写：HDU刷题神器

    声明:本文以学习为目的,请不要影响他人正常判题 HDU刷题神器,早已被前辈们做出来了,不过没有见过用python写的.大一的时候见识了学长写这个,当时还是一脸懵逼,只知道这玩意儿好屌-.时隔一年,决定 ...

  6. NYOJ--102--次方求模（快速求幂取模）

    次方求模 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 求a的b次方对c取余的值   输入 第一行输入一个整数n表示测试数据的组数(n<100)每组测试只有一 ...

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

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

  8. C# 获取并判断操作系统版本，解决Win10、 Windows Server 2012 R2 读取失败的方案

    Windows 8.1, Win10之后,通过GetVersion and GetVersionEx 方法获取WIndows操作系统版本号的功能需要添加manifest文件后才能查找到,不然的话会查找 ...

  9. Hadoop1.0.3安装部署

    0x00 大数据平台相关链接 官网:http://hadoop.apache.org/ 主要参考教程:http://www.cnblogs.com/xia520pi/archive/2012/05/1 ...

  10. 再起航，我的学习笔记之JavaScript设计模式09(原型模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...