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:CSS - IE不显示完全正确
/* 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关闭。假按钮的高度稍微偏小。我已经摆弄了很长时间,似乎无法想象它!
在任何人评论之前,我在这里使用表格,因为它只是使垂直对齐更容易。
如果更新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;
}
我试过有条件的评论,但似乎无法让他们在我的外部CSS工作? – 2010-09-17 12:03:31
这很奇怪。我已经用一个简单的例子更新了我的答案,您将如何包含IE浏览器样式表。您只需确保在您的主要样式表包含之后出现条件注释。 – Pat 2010-09-17 12:16:58
我建议你看看语义,当涉及到HTML。这根本不应该放在桌子里面。从外观上看,你使用表单作为搜索框,为什么不使用表单标签来标记呢?
我也建议你看看CSS重置如果您尚未:
http://meyerweb.com/eric/tools/css/reset/
他们是非常有用的,给你一个很好的空白画布,开始与编码。如果一切都失败,请确保您有一个有效的文档类型!其他需要注意的一点是这样的IE浏览器的不同之处是实现盒模型:
我不使用表单标签,因为它位于ASPX页面上 – 2010-09-17 12:02:06
您可以应用的IE CSS破解:
height: 26px;
*height: 27px;
我爱问题的标题,因为这是真的在数以千计的不同场合:-) – 2010-09-17 10:38:12