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. Spring事务管理的另一种方式--TransactionTemplate编程式事务管理简单入门

    1, 一直以来, 在用Spring进行事物管理时, 只知道用声明式的策略, 即根据不同的数据源, 配置一个事物管理器(TransactionManager), 通过配置切面(PointCut)应用到相 ...

  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. 你可能需要为你的APP适配iOS11

    WeTest 导读  iOS 11 为整个生态系统的 UI 元素带来了一种更加大胆.动态的新风格. 本文介绍了iOS11在UI方面做了哪些更新,有些更新可以为用户提供更加完美的体验,但也有的可能会给目 ...

  4. Redux源码分析之combineReducers

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  5. 简单工厂设计模式--Java设计模式（一）

    一 概念: 简单工厂模式就是通过一个工厂类根据参数动态创建对应的类. 二 案例 我们以汽车作为例子,在现实生活中汽车只是一个抽象的产品,其中有很多类型的汽车才是具体产品,如奔驰.宝马.保时捷等等(当然 ...

  6. C语言左值，运算符的优先级以及结合性探讨

    刚刚开始看一本书.<C陷阱与缺陷>,相信学习C语言的大家都对这本书有耳闻.今天看到了里面的贪心法则.也即在读到一个字符后,尽可能多的读入更多的字符,直到读入的字符组成的字符串已经不可能再组 ...

  7. 【某集训题解】【DAY 2 T3】与非

    题目描述 作为一名新世纪共产主义的接班人,你认识到了资本主义的软弱性与妥协性,决定全面根除资本主义,跑步迈入共产主义.但是当你即将跨入共产主义大门的时候,遇到了万恶的资本家留下的与非电路封印,经过千辛 ...

  8. Spring+SpringMVC+MyBatis+easyUI整合基础篇（四）代码简化

    点这里看实际效果! 账密:admin 123456   敲了一天的代码,有些烦,感觉前一篇文章写的太笼统了,哈哈哈.   本来呢,也就是刚开始写,所以很多细节都想不到,源码也放上来了,自己动动手应该也 ...

  9. mybatis 详解（五）------动态SQL

    前面几篇博客我们通过实例讲解了用mybatis对一张表进行的CRUD操作,但是我们发现写的 SQL 语句都比较简单,如果有比较复杂的业务,我们需要写复杂的 SQL 语句,往往需要拼接,而拼接 SQL ...

  10. Autofac in webapi2

    安装包:Autofac.webapi2 注意: install-package autofac.webapi2 (注意:您的项目中如果使用的是webapi2,此处必须为webapi2而不是webapi ...