Html 在IE7中显示侧选项卡导航时出现问题
我正在尝试使用html/css构建一个“选项卡式”侧导航菜单 我将使用最方便的方法，使用一个只有一行和两个单元格（列）的表。左侧单元格用于“选项卡”，右侧单元格用于显示内容。包含选项卡的左侧单元格的右边框设置为选项卡和内容之间的分隔符 每个“选项卡”都是此单元格中的div标记。然后，我想消除所选“选项卡”的右边框。为了实现这一点，我将选定的“Tab”div设置为右边距为-1px。其思想是，这将从本质上偏移该div，以覆盖在基础表单元格中设置的右边框。这种机制在Firefox和Safari中运行良好，但在IE7中不起作用。有人知道如何让这个tor在IE7中工作吗 注意。。。到目前为止，我还没有在IE8中对此进行检查 这是htmlHtml 在IE7中显示侧选项卡导航时出现问题,html,css,internet-explorer-7,Html,Css,Internet Explorer 7,我正在尝试使用html/css构建一个“选项卡式”侧导航菜单 我将使用最方便的方法，使用一个只有一行和两个单元格（列）的表。左侧单元格用于“选项卡”，右侧单元格用于显示内容。包含选项卡的左侧单元格的右边框设置为选项卡和内容之间的分隔符 每个“选项卡”都是此单元格中的div标记。然后，我想消除所选“选项卡”的右边框。为了实现这一点，我将选定的“Tab”div设置为右边距为-1px。其思想是，这将从本质上偏移该div，以覆盖在基础表单元格中设置的右边框。这种机制在Firefox和Safari中运行良
<!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>
侧边标签页
#副菜单
{
背景色：#DDFFCC；
右边框：1px实心#BDDCAD；
宽度：199px；
垂直对齐：顶部；
文本对齐：居中；
}
#侧菜单分区
{
填充：8px 0px 8px 8px；
边框底部：1px实心#BDDCAD；
字体大小：粗体；
字号：12号；
}
#侧菜单选定
{
填充：8px 0px 8px 8px；
边框底部：1px实心#BDDCAD；
字体大小：粗体；
字号：12号；
背景色：#ffffff；
右边距：-1px；
}
产品规格
工作原理
维修
Lorem ipsum Door sit amet，为精英服务，为临时雇员提供服务
这是一个巨大的挑战。这是一个小小的节日
ullamco Laboraris nisi ut aliquip ex ea commodo consequat实习。酒后驾车
我的心在我心中，我的心在我心中，我的心在我心中，我的心在我心中，我的心在我心中
帕里图尔。不可因疏忽而导致死亡的例外情况，不可因疏忽而导致死亡
这是我的劳动。全方位错误下的透视
坐在劳丹提姆酒的容器里，完全放松，完全放松
发明者的真实身份和准建筑师的身份必须明确。
position: relative; left: 1px
position: relative; left: 1px