CSS - IE显示不正确

时间:2010-09-17 10:33:18

标签: html css internet-explorer

        <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关闭。假按钮的高度略小。我已经摆弄了很多年,似乎无法解决这个问题!

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

3 个答案:

答案 0 :(得分: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;
} 

答案 1 :(得分:0)

我建议你看一下HTML的语义。这根本不应该在一张桌子里面。根据它的外观,您使用表单作为搜索框,为什么不使用表单标记进行标记?

如果你还没有,我建议你研究CSS Resets:

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

它们非常有用,可以为您提供一个漂亮的空白画布来开始编码。如果所有其他方法都失败,请确保您拥有有效的doctype!另外需要注意的是IE在盒子模型实现方面的不同之处:

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

答案 2 :(得分:0)

你可以申请IE css hack:

height: 26px;
*height: 27px;