display:inline-block终极解决方案

对于display:inline-block，做项目的时候经常用到，经常出问题，所以在今天，终于下定决心要好好整理下。

众所周知：inline-block的作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。这就给我们带来很大的便利，比如不用浮动，就可以将元素呈递为内联样式，而且还可以直接给元素设置宽度、高度、边距等等。俗话说，有利就有弊，没有东西是完美的。inline-block在给我们带来好处的同时，也带给了我们很多麻烦。就比如前端要考虑的兼容问题。
一、兼容性
IE6/IE7下对display:inline-block的支持性不好。

1、inline元素的display属性设置为inline-block时，所有的浏览器都支持；

2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；
就如下面的代码：
html:

<ul class="test">
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
        <li>放假</li>
    </ul>

css:

.test {width:200px;height:200px;background: #add8e6;padding:80px 40px 20px;}
.test li {display:inline-block;background:#f08080;border:1px solid #fafad2;width:50px;height:50px;line-height:50px;text-align:center;font-size:16px;font-family:'microsoft yahei';color:#fff;list-style-type: none;margin-top: -1px;}

在ff下是这样的：

在IE6/7下却是这样的：


哎，看到这一幕的时候，心情很忧伤呐。不过还好，我们可以用Css Hack方法让display：inline-block在IE6/7下生效。
在刚刚的代码后面加上*display:inline;*zoom:1;这两句就可以了。

二、出现间隙
查了资料，才知道display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。原本以为事情就这样结束了，因为以前的项目都是要求inline-block后呈递的元素之间有边距，所以也没有考虑太多。但是今天做这个的时候，我发现了问题的所在。

左边这块和右边这块都被我设置为inline-block，但是悲剧出现了，中间有间隙！！！为什么会出现间隙呢？难道是本身就设置了边距？于是我又margin:0;padding:0;试了一下，没用！那就证明不是margin和padding的问题。到底是什么呢？仔细想想，刚前面说了inline-block支持空格，于是恍然大悟，才发现，原来是里边的换行符、空格等在作祟，干掉它们，间隙就没有了。

关键的来了，font-size:0;加上这一句，间隙立马消失的无影无踪了。

三、总结

每一个看似简单的东西，都需要我们深入的去理解，去运用，然后再次理解、运用。特别是当我们遇到问题，或者是实际的效果跟我们预期的效果不一致时，不要先去想怎样解决它，要首先去想出现这个问题的原因。因为如果只是想着怎么去解决的话，有可能用错误的方式获得了正确的效果，这样你就离正确的东西越来越远了。如果遇到问题，就找出 出现这个问题的根本原因，那么就能对症下药，并很快的找到正确的解决方法。这样才能很快的进步。特别是在前端这一行，会出现很多的问题，以前我遇到问题总是只想着怎么去解决它，有的时候就用了错误的方法，但后来我才发现，结果有时候并没有过程重要，在前端这一行，很有可能用错误的方法却得到了正确的答案，但千万不要认为自己就正确了，有可能这个错会导致接下来的更多问题。归根结底，永远不要认为我们什么都懂了，或者什么东西太简单了，就不去研究。我们应该不断的保持探索的精神，在前端的道路上，扎实自己的基础，坚定自己的信念，奋斗下去，菜鸟终将变成大鸟！

来源：CSDN

作者：橘子小睿

链接：https://blog.csdn.net/reallyrui/article/details/22881411