Question

我正在尝试使用html / css构建“选项卡式”侧面导航菜单。

我采用最方便的方法来使用具有单行和两个单元格（列）的表。左侧单元格用于“标签”，右侧单元格用于显示内容。包含选项卡的左侧单元格的右边框设置为选项卡和内容之间的分隔符。

每个“Tab”都是此单元格中的div标签。然后我想为所选的“Tab”消除这个右边界。为实现这一点，我设置了选定的“Tab”div，其边距为-1px。这个想法是，这将基本上抵消该div以覆盖在基础表格单元格中设置的右边界。这种机制在Firefox和Safari中运行良好，但在IE7中不起作用。任何人都知道如何在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>

Answer 1

尝试一种

的风格

position: relative; left: 1px

在div＃sidemenuselected

上

在IE7中显示侧标签导航时出现问题

1 个答案: