Неправильное выравнивание тега <input>и <a>в Internet Explorer

Question

у меня есть следующее поле поиска,

<form class="explore"> 
    <input type="text" name="find" id="find" class="in-put find-field" size="50" />
    <input type="submit" id="find" value="Find" class="sub_but" /> or just 
    <a href="index.php?pg=explore">Explore</a>
</form>

все подряд со следующим 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; }

он выглядит очень унифицированным во всех браузерах, кроме Internet Explorer. я не могу понять проблему ..

Answer 1

Как насчет:

.explore * { vertical-align: middle; }