<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关闭。假按钮的高度略小。我已经摆弄了很多年,似乎无法解决这个问题!
在有人评论之前,我在这里使用表格,因为它只是使垂直对齐更容易。
答案 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在盒子模型实现方面的不同之处:
答案 2 :(得分:0)
你可以申请IE css hack:
height: 26px;
*height: 27px;