【发布时间】：2010-10-16 05:40:07
【问题描述】：
我正在尝试使用 html/css 构建一个“选项卡式”侧导航菜单。
我将采用最方便的方法，即使用具有单行和两个单元格（列）的表格。左侧单元格用于“选项卡”，右侧单元格用于要显示的内容。包含选项卡的左侧单元格的右边框设置为选项卡和内容之间的分隔线。
每个“Tab”都是该单元格中的一个 div 标签。然后我想消除所选“选项卡”的右边框。为了实现这一点，我将选定的“Tab”div 设置为 -1px 的边距。这个想法是这将基本上抵消该 div 以覆盖在基础表格单元格中设置的右边框。这种机制在 Firefox 和 Safari 中运行良好，但在 IE7 中不起作用。任何人都知道如何让这个 tor 在 IE7 中工作？
注意...我还没有在 IE8 中检查过这个。
这里是html...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Side Tabs</title>
<style type="text/css">
#sidemenu
{
background-color: #DDFFCC;
border-right: 1px solid #BDDCAD;
width: 199px;
vertical-align: top;
text-align: center;
}
#sidemenu div
{
padding: 8px 0px 8px 8px;
border-bottom: 1px solid #BDDCAD;
font-weight: bold;
font-size: 12pt;
}
#sidemenuselected
{
padding: 8px 0px 8px 8px;
border-bottom: 1px solid #BDDCAD;
font-weight: bold;
font-size: 12pt;
background-color: #ffffff;
margin-right: -1px;
}
</style>
</head>
<body>
<center>
<div style="background-color: #ECF1ED; padding: 16px; width: 600px;">
<table cellpadding="0" cellspacing="0" style="width: 100%; table-layout: fixed;">
<tr>
<td id="sidemenu">
<div style="height: 40px">
</div>
<div>
Product Specifications</div>
<div id="sidemenuselected">
How It Works</div>
<div>
Maintenance</div>
</td>
<td>
<div style="padding: 16px; background-color: #FFFFFF; text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
【问题讨论】：
标签： html css internet-explorer-7