炒冷饭之inline-block

*在看文章之前假设你接触过inline-block

自从你知道有inline-block这个东西，你应该不会经常地使用它。因为你知道，在IE6，IE7中是不完全支持的，另一个意思就是部分支持，好了不绕圈，就是IE6，7只有内联元素支持inline-block。由于我有一段时间觉得用inline-block还不如用block，所以就没有用了，因为有兼容性的东西，用起来就是很不爽。今天有点时间所以又去查了点资料，再次熟悉它。

 

1、你或许已经知道，只有在表格的td和内联元素中inline-block才起作用。

 

是的，这是它的基础。一般人为什么用inline-block，因为它可以有block和inline2种属性。但是碰到IE6的时候，你可以会傻了，怎么你不认识它。事实上，IE5.5就有了这个属性，所以IE6肯定也有。就是因为不完全支持导致了问题。于是我又找了挺多资料，其实都是垂直居中相关的。

 

2、它应用于垂直居中。

 

在IE8+以及其他现代浏览器，垂直居中可以简单地使用“display:table-cell;vertical-align:middle;”。但是在IE7-（ie7以下），问题又出现了，因为IE7-不认识table-cell，所以你又是要写一堆的hack。最后你发现，原来没有一种方案是非常地好。如果想要垂直居中，可以在网上找找。一直流传2种方案。第一种是针对IE的write mode，这种写法我以前没怎么去写。我直接用了第二种，使用了一个空的内联标签，让它撑满整个容器，再设一个vertical-align:middle;这样，其中的内联元素都能以它为标准进行垂直居中。

 

这篇文章纯粹是后记，知识久了就有模糊的地方，还是要炒炒冷饭方可以饱肚。