不对齐 谷歌浏览器_谷歌浏览器input上下不对齐兼容解决办法

最近项目中，须要写一个搜索框样式(样式很简单)以下：css

当写完代码，进行浏览器兼容性测试的时候，发如今谷歌浏览器下文本框和按钮没有对齐，文本框偏下一点，其余浏览器正常；样式以下：html

缘由：文本框高度少2像素，由于type=”text”的高度不包括border，而type=”button”包括。(别人是这么说的)浏览器

解决办法：在input的css里增长  vertical-align:middle；post

HTML代码分享：测试

CSS关键代码url

.index_search{ border-radius:30px; width:195px; height:30px; border:1px solid #ccc; margin-top:40px; padding:0 0 0 12px; overflow:hidden;}

.index_search input{ border:0px; height:30px; width:153px; line-height:30px;vertical-align:middle}

.index_search #index_btn{ width:42px; background:url(../images/search_fdj.png) center center #ddd; }