display:inline-block替换float的问题

拜读了大神的博客以后http://www.zhangxinxu.com/wordpress/?p=1194，对float有了新的认识，尝试用display:inline-block来替换用float实现的内容。具体过程如下：

首先，我们创建几个div：

<div class="container">
<div class="content">
<div class="logo"></div>
<div class="search"></div>
</div>
</div>

然后，设定基本样式：其中内容块设置属性display：inline-block;

.container{
height: 100px;
width: 100%;
background-color: #f90;
}
.content{
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #a6c0f9;
}
.logo{
height: 100px;
width: 80px;
display: inline-block;
background-color: pink;
}
.search{
height: 100px;
width: 550px;
background-color: green;
display: inline-block;
vertical-align: top;
}

表现是这样子的：


我们发现logo和search这两个div中间有缝隙，这是我们预料到的，因为html代码中的空格也显示了出来。但是高度为什么也多出来一点（大约1px）呢？

尝试把空格全都去掉：中间的缝隙没有了，但是高度超出容器的范围还是存在。

为两个div中间加上内容，显示为：



发现下面多出来的1px消失了！

把内容去掉，用font-size:0;来解决缝隙问题：


多余的地方也清除了。

但是height多出来的地方还是不知道什么原因。把display去掉就没有这个问题，似乎是出在inline-block上，但是查了display:inline-block的其他资料，并没有找到答案，其他浏览器也都有这个问题。百思不得其解，希望了解的人能指点一二，and日后找到答案一定要来更新。

我们继续在search内添加一个input：

<div class="container">
<div class="content">
<div class="logo"></div>
<div class="search">
<input type="text" class="search_input" />
</div>
</div>
</div>

发现结果变成了这样：



给input加上border后恍然大悟，原来是因为对齐。给search加上vertical-align: top;之后，一切就显示正常啦


PS：之前学CSS，只要知道干什么了就拿来用了，出了问题也是东拼西凑的勉强解决就万事大吉，这样是非常不好的。最近发现还是要多看看专业书多查文档，掌握标准的人才能掌握天下啊~~