inline-block属性说明：

    设置这个值之后对象自己呈递为内联对象，但是对象内的内容作为blockboxes呈递。也就是说设置了这个值的元素就等于可以在一个可以包含blockboxes的inlinebox元素。而话说IE6、7虽然是能支持inline-block的，但是在他们眼里display:inline-block只是触发layout的一个条件，而非W3C规定的东西。不过我们正好可以利用IE的layout来模拟实现display:inline-block的效果。

    inline-block各个浏览器的兼容方案

    有两种方法，都是先触发IE的layout，然后再定义display:inline，让块元素自身呈递为内联对象，如下：

    1.其中在所有能触发layout的属性中，排除position:absolute和浮动以及width，height之后，能用的就只有display:inline-block了,如下：

    fn-ib{display:inline-block;}fn-i{*display:inline;}

    注意两个display要先后放在两个CSS声明中才有效果，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失。

    2.第一种方法要放在两个CSS声明中，有时稍不注意就可能搞错了，出发IE的layout还有zoom:value，代码如下：

    fn-ibz{display:inline-block;*display:inline;*zoom:1}

    从上我们看出IE6、7是支持属性inline-block的，只是没有实现W3C的效果，所以我们利用layout再display:inline来模拟inline-block属性的效果。

    好了，现在有解决各个浏览器inline-block的方案了，接下来要解决是：在不同浏览器下看下面的例子：

    1.jpg

    inline-block元素在不同浏览器下有间隙是inline自身的性质，不是bug

    然后我们发现在支持display:inline-block属性的浏览器中inline和block元素display:inline-block后均会产生水平空隙；而在IE67以及IE（Q）模拟display:inline-block后分两种情况：模拟之后的块元素没有间距，而内联元素有间隙。为什么？这里再补充一个知识点：inline元素在默认状态下排列都是有间隙的。所以以上现象就又如下解释了：

    支持display:inline-block属性的浏览器，其元素本身就相当于inline元素，所以现代浏览器中都有间隙；而模拟的方案中，因为虽然将块元素设置display:inline能使其想行内元素一样水平排列，但是block元素还是block元素，不会真的变成inline元素，所以就没有空隙。

    而产生空隙的根本原因是HTML中的换行符、空格符、制表符等字符产生了空白符。

    inline-block之间的水平间隙问题解决方案

    以上我们知道产生间隙的根本原因是HTML中的换行符、空格符、制表符等字符，俺么我们把标签与标签之间的空格去掉，就不会有问题了么？所以代码如下：

    HTML代码如下：

    <divclass="parent">

    <strongclass="fn-ibz">内联元素</strong><strongclass="fn-ibz">

    内联元素</strong><strongclass="fn-ibz">

    内联元素</strong><strongclass="fn-ibz">

    内联元素</strong>

    </div>

    <divclass="parent">

    <divclass="fn-ibz">块元素</div><divclass="fn-ibz">

    块元素</div><divclass="fn-ibz">

    块元素</div><divclass="fn-ibz">

    块元素</div>

    </div>

    效果图：

    1.jpg

    改变DOM结构来解决inline-block之间的间隙问题

    以上DEMO代码我是做了处理的，所以我们就看不到间隙。但是问题由来了：

    如果是静态的话我们这么做确实没多大问题，假如是后台直接生成的呢？或者以后维护同事看到这代码怎么这么写的，改回来了呢。所以用CSS解决还是最好的途径。我第一次看到这个情况第一反应就是用margin负值来解决，后来知道产生空隙的根本原因之后，觉得margin负值方法虽然能够解决，但是没有对症下药，间隙产生原因的是HTMl间的换行符、空格符、制表符等字符，而间隙会随着字体大小等属性变化而变化。所以就可以用CSS控制字符大小来找出一个。所以参考YUI3中解决的方案，我得到如下代码：

    .f-w-p-parent{

    font-size:0;

    letter-spacing:-4px;

    *letter-spacing:normal;

    *word-spacing:-1px;

    }

    .f-w-p-inner{

    font-size:12px;

    letter-spacing:normal;

    *word-spacing:normal;

    vertical-align:top;

    }

    效果图：

    3.jpg

    CSSinline-block的间隙的方案

    然后我们分析每一行代码的作用：

    font-size的作用：既然是字符引起的，当然是把他们的font-size设置为0,然后再元素内font-size大小设回原来的大小。除了IE6、7以及低版本的chrome和Safari的其他浏览器inline-block间隙到这一步就没了(低版本的chrome因为设置font-size:0之后，不能让文字自由伸缩，所以不推荐)

    word-spacing的作用：在IE6、7以及IE（q）模式下，始终有1px的间距，然后我们就利用word-spacing:-1px来解决(单词之间的距离，只对英文有用，中文没有单词这概念)，然后再元素内设回normal。当然使用margin:000-1px;也是可以的（貌似代码还少了…）

    letter-spacing的作用：剩下就只有低版本的chrome和Safari了，letter-spacing是调整文字之间的间距，因为letter-spacing跟font-size和font-family甚至不同浏览器都是有差别的，所以按照《letter-spacing与字体大小/字体关系的数据表》上面的数据来设置，就能将间隙取消。然后因为letter-spacing和word-spaacing在一起容易出事，所以加了*letter-spacing:normal;这句代码。

    vertical-align:top的作用：最后讲的这个跟间隙无关，设置vertical-align:top是为了让inline-block元素以top基线对齐。vertical-align属性只在inline、inline-block元素有效。

    inline-block的优点

    这里不说inline-block布局比浮动布局节省浏览器资源，我们就得抛弃浮动布局，投向inline-block布局的怀抱（而且官网也没这个说法），毕竟一个事物的出现毕竟有它存在的意义的，而且浮动布局也是认识度最高的布局方法。所以还是那句话，具体情况具体分析，明明使用浮动布局结构更清晰的，你非得用inline-block而增加了大量亢余代码，就算inline-block布局真的像传说中的那样最不耗资源，但是你html代码增加了不也是耗资源了么。

    就算有，我也觉得不大。所以改用绝对定位就用绝对定位，改用浮动就用浮动，如果碰到一个情况使用inline-block能更好的解决问题，那就大胆的用吧。毕竟inline-block相较与浮动和绝对定位还是有一些有点的。

    能使用vertical-align和text-align实现垂直、水平、两边、基线等等对齐，而且还是自适应的哦。

    因为自身原因，所以特别适合流体布局。高度和宽度不用定死。






本文转载自中文网