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关闭。假按钮的高度稍微偏小。我已经摆弄了很长时间，似乎无法想象它！

在任何人评论之前，我在这里使用表格，因为它只是使垂直对齐更容易。

Answer 1

如果更新HTML是你可以使用conditional comments，服务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

我建议你看看语义，当涉及到HTML。这根本不应该放在桌子里面。从外观上看，你使用表单作为搜索框，为什么不使用表单标签来标记呢？

我也建议你看看CSS重置如果您尚未：

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

他们是非常有用的，给你一个很好的空白画布，开始与编码。如果一切都失败，请确保您有一个有效的文档类型！其他需要注意的一点是这样的IE浏览器的不同之处是实现盒模型：

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

Answer 3

您可以应用的IE CSS破解：

height: 26px; 
*height: 27px;