HTML中 input 和 button 的同行对齐问题

这两周放假在家决定找点事干。于是在W3school和慕课上将HTML+CSS部分重新看了一遍。看完之后觉得在学校学了一年半的网页好像白学了(苦笑)。当初了为了应付升学考(考试90分钟做一个主题网站)，大部分同学(包括我)都是用PS切片(切出来都是表格)直接导出站点然后再填充网页内容。因为用DIV+CSS时间上不太够，所以遇到这种方法的我沾沾自喜，熟不知这种做法根本就无益于网页制作。。。

这两天在做百度在github上的IFE/2015_spring task1 碰到了这样一个部分

一个搜索框(一对input和button)

天真的我以为给他们设置了同样的高度就O justin biber K 了(都是行内元素)

.keywords{
    height: 40px;
    width: 170px;
    background-image: url(../img/search.png);
    background-repeat: no-repeat;
    background-position: left;
    text-indent: 3.3em;
}

.submit{
    height: 40px;
    width: 50px;
    background-color: rgb(221,221,221);
    font-size: 16px;
    font-family: "Century Gothic";
    color: #fff;
}

结果...

好像有点货不对版...

一定是因为边框的原因！

.keywords{
    /*加上边框*/
    border: 1px solid #e2e2e2;
    border-right: none;
}

.submit{
    /*去掉边框*/
    border: none;
}

这样就差不多了嘛

哎，等等。怎么感觉有点不对劲？

？？？ ？？？？？？

经过一番baidu之后，发现button的默认盒模型是border-box而不是content-box于是乎我把input的box-sizing也设为border-box后

情况似乎变得严峻起来...

但是当我将他们的border都设为none后

懵β...

一头雾水的我给他们瞎β加了一通属性之后发现问题依然存在(其间还发现改字体大小可以让他们位置迷之变化然后对齐。。。)，然而当我觉得 vertical-align: middle; 并不会起作用的时候！

WTF...

这件事情告诉我们有时候问题并没有那么复杂，只是把问题想复杂了。。。