CSS - IE отображает не совсем правильно

Question

        <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, однако, я не могу заставить его соответствовать, кажется, что 1px off.Высота фальшивой кнопки немного слишком мала.Я возился целую вечность и, похоже, не могу этого понять!

Прежде чем кто-то также прокомментирует, я использую таблицы здесь, потому что это просто упрощает выравнивание по вертикали.

Answer 1

Если обновление HTML является опцией, вы можете использовать условные комментарии и использовать в IE немного другую версию CSS, которая корректирует высоту:

HTML

<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" media="all" />
<![endif]-->

styles.css

.searchBtn {
    height: 26px;
} 

ie.css

.searchBtn {
    height: 25px;
} 

Answer 2

Вы можете применить взлом IE css:

height: 26px;
*height: 27px;

Answer 3

Я бы посоветовал вам взглянуть на семантику, когда дело доходит до HTML. Это не должно быть внутри стола вообще. Судя по всему, вы используете форму в качестве поля поиска, так почему бы не отметить ее с помощью тега формы?

Я бы также посоветовал вам изучить CSS Reset, если вы этого еще не сделали:

http://meyerweb.com/eric/tools/css/reset/

Они чрезвычайно полезны и дают вам хороший чистый холст, с которого можно начать кодирование. Если ничего не помогает, убедитесь, что у вас есть действительный тип документа! Еще одна вещь, которую стоит отметить, - это то, как IE отличается реализацией блочной модели:

http://www.w3.org/TR/CSS2/box.html