关于display:inline-block的元素不在同一水平线

今天在开发一个仿网易云的应用时，在布局上遇到一个特别奇怪的问题。先看布局如下。

因为我是用vue写的，但是忽略其语法，就当是个不同的九宫格布局。
css代码

就粗现了如下的情况，让我百思不得其解。

没错，都是一样的代码，就在第八张图片的时候出现了错位。
当然问题来了，我们也不用怕，要发挥出一个程序猿应有的品质，去修复这个BUG，后来我想起来，因为display:inline-block是一种介于inline和block的东西，而它也和inline属性一样，存在基准线的问题，我就试了试把所有的li改成了。

这样就完美解决了问题。

看！再也不会出现那种高度不一的界面了。
另外可能你看到，我把float:left注释了，如果你用float布局，不用inline-block也是不会出现这种情况。
如果你想深入了解inline-block这个属性，送上张旭鑫老师的一篇博文，也许对你有帮助http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/