CSS-ie显示不太正确

        <div class="searchWrapper">
          <table height="100%" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center"><input type="text" id="searchInput" class="searchBox" /></td>
                <td><div class="searchBtn">Search</div></td>
            </tr>
          </table>           
        </div>

使用CSS:

/* Search */
.searchWrapper
{
    background-image:url(../images/menuBG.jpg);
    height:45px;
    width:380px;
    background-position:bottom;
    background-repeat:repeat-x;
    background-color:#79ABC4;
}

.searchBtn
{
    cursor:pointer;
    border:outset 1px #ccc;
    background:#999;
    color:#666;
    font-weight:bold;
    height: 26px;
    position:relative;
    top:1px;        
    width: 75px;
    background:url(../images/formbg.gif) repeat-x left top;
    margin-right: 5px;
    text-align:center;
    line-height: 27px;
    font-size: 14px;
}
.searchBox
{
    width:270px;
    height:25px;
    font-size: 16px;
    border:1px solid #3C81AA;
    margin-left:5px;
    line-height: 25px;
    padding-left:10px;
    padding-right:10px;
    color: #666;
}

如果在FF中运行,它将显示“很好”,而“假”按钮将显示为与输入框相同的高度和位置。

但在IE里,我没法让它匹配,好像是1倍的折扣。假按钮的高度有点小。我已经摆弄了好长时间了,似乎还没弄明白!

在任何人发表评论之前,我在这里使用表格,因为它只是让垂直对齐变得容易多了。