关于搜索框与搜索按钮出现少少的错位问题

在之前做团委搜索页面的时候，曾经出现过一个小小的问题：搜索框与搜索按钮没对齐！今天读到一篇文章，写到了有关这个问题的探讨。

当使用：

<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
的时候就会出现上面的没对齐情况！如下：


我当时是直接用margin-top来调整这种错位的。

在读到的那篇文章里，我看到一个更好的解决方案：
用<button>标签代替input="image"，然后用CSS添加背景图片。

<input type="text" class="box" />
<button class="btn" title="Submit Search">Search</button>

文章里说到如果输入文字过多IE6和IE7会水平滚动背景图片，所以背景图片要右对齐（

background: url(search_bg_ie.gif) no-repeat right bottom;

）！


最后给出文章的链接地址:http://www.qianduan.net/css-design-with-your-search-box.html

转载于:https://www.cnblogs.com/joyho/archive/2013/03/30/2989936.html