Improper alignment of <input> and <a> tag in Internet Explorer

i have following search form field,

<form class="explore"> 
    <input type="text" name="find" id="find" class="in-put find-field" size="50" />
    <input type="submit" id="find" value="Fi开发者_如何学编程nd" class="sub_but" /> or just 
    <a href="index.php?pg=explore">Explore</a>
</form>

everything in a row with following css,

.explore{ background:#3F3F3F; border:2px solid #F2F2F2; padding:4px 0; text-align:center; margin:0 35px 0 35px; }
.explore .find-field{ background:#fff; border:3px solid #539D09; font-weight:bold; padding:4px 0; }
.explore .sub_but{ background:url('img/stripe_grn.png'); border:0px solid #89A8EF; font-weight:bold; display:inline; padding:5.5px 15px; }
.explore .sub_but:hover{ background:#539D09; }
.explore a{ background:url('img/stripe_blu.png'); border:0px #89A8EF solid; color:#E9E9E9; font-weight:bold; padding:5px 15px; }
.explore a:hover{ background:#89A8EF; text-decoration:none; }

it appears very much uniformed in all browsers except Internet explorer. i can not understand the problem..

How about:

.explore * { vertical-align: middle; }