最近项目中,需要写一个搜索框样式(样式很简单)如下:
当写完代码,进行浏览器兼容性测试的时候,发现在谷歌浏览器下文本框和按钮没有对齐,文本框偏下一点,其他浏览器正常;样式如下:
原因:文本框高度少2像素,因为type=”text”的高度不包括border,而type=”button”包括。(别人是这么说的)
解决办法:在input的css里增加 vertical-align:middle;
HTML代码分享:
<!--搜索框-->
<div class="index_search fr">
<form action="" method="post">
<input type="text" placeholder="请输入搜索关键词" /><input type="submit" id="index_btn" value="" />
</form>
</div>
CSS关键代码
.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; }