具有跨浏览器问题的 CSS 菜单

Question

我正在尝试使用 CSS 菜单解决菜单在 IE 6 中无法正确显示的问题 alt text http://content.screencast.com/users/Dokmanc/folders/Jing/media/72b0aae5-4e7a-437e-8a57-da892b05b7ad/2010-06-15_2056.png

我看到 HTML 有一些条件代码，使其适用于不同的浏览器，但我对它的理解还不够。

有人可以提出修复建议，使选定的选项卡按顺序显示而没有灰色中断吗？

谢谢!

这是 CSS:

#pad
{
    height: 140px;
}
.dropline
{
    position: relative;
    padding-bottom: 0px;
    list-style-type: none;
    margin: 0px 0px 0px 5px;
    padding-left: 0px;
    width: 860px;
    padding-right: 0px;
    background: url(../images/menus/ulback.gif) repeat-x;
    height: 40px;
    top: 0px;
    list-style-image: none;
    padding-top: 0px;
    left: 5px;
}
.dropline TABLE
{
    margin: -3px -10px;
    width: 25px;
    border-collapse: collapse;
    height: 17px;
}
.dropline LI
{
    margin-bottom: 0px;
    float: left;
}
.dropline LI A
{
    padding-bottom: 0px;
    line-height: 40px;
    padding-left: 0px;
    padding-right: 19px;
    display: block;
    font-family: tahoma, sans-serif;
    float: left;
    height: 40px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding-top: 0px;
}
.dropline A
{
    text-align: right;
    padding-bottom: 0px;
    line-height: 40px;
    padding-left: 0px;
    padding-right: 19px;
    font-family: tahoma, sans-serif;
    float: right;
    height: 40px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding-top: 0px;
}
.dropline A:hover
{
    color: yellow;
}
.welcomeuser
{
    text-align: right;
    padding-bottom: 0px;
    line-height: 40px;
    padding-left: 20px;
    padding-right: 0px;
    font-family: tahoma, sans-serif;
    float: right;
    height: 40px;
    color: #fff;
    clear: inherit;
    font-size: 12px;
    text-decoration: none;
    padding-top: 0px;
}
.dropline LI A B
{
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 0px;
    display: block;
    float: left;
    height: 40px;
    cursor: pointer;
    padding-top: 0px;
}
.dropline UL
{
    z-index: 10;
    border-bottom: #fff 1px solid;
    position: absolute;
    padding-bottom: 0px;
    list-style-type: none;
    margin: 0px;
    padding-left: 0px;
    width: 860px;
    padding-right: 0px;
    background: #f8f8f8;
    height: 25px;
    border-top: #ff9933 3px solid;
    top: 40px;
    list-style-image: none;
    padding-top: 0px;
    left: -9999px;
}
.dropline UL LI
{
    line-height: 25px;
    height: 25px;
}
.dropline UL.right LI
{
    float: right;
}
.dropline UL LI A
{
    padding-bottom: 0px;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    height: 25px;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    border-right: #e60 1px solid;
    padding-top: 0px;
}
.dropline UL LI A:hover
{
    line-height: 25px;
    background: none transparent scroll repeat 0% 0%;
    height: 25px;
    color: #c60;
}
.dropline UL.right LI A
{
    border-left: #e60 1px solid;
    border-right: 0px;
}
.dropline UL LI A.last
{
    border-bottom: 0px;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
}
.dropline :hover UL
{
    left: 0px;
}
.dropline LI.current UL
{
    z-index: 1;
    left: 0px;
}
.dropline LI.current A
{
    line-height: 36px;
    background: url(../images/menus/tab_a.gif) no-repeat right top;
    height: 44px;
}
.dropline LI.current A B
{
    line-height: 36px;
    background: url(../images/menus/tab_b.gif) no-repeat left top;
}
.dropline LI.current UL LI A
{
    padding-bottom: 0px;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    background: none transparent scroll repeat 0% 0%;
    height: 25px;
    color: #000;
    padding-top: 0px;
}
.dropline LI.current UL LI.current_sub A
{
    color: #c60;
}
.dropline LI.current UL LI A:hover
{
    color: #c60;
}

这是 ASPX 标记:

<div id="top_nav">   
    <asp:ContentPlaceHolder ID="phTopNav" runat="server">
        <!-- MENU -->
        <ul id="dropline" class="dropline" runat="server" style="left: -6px; top: -2px; width:1000px;" clientidmode="Static">

             <li runat="server" id="Home">
                <a runat="server" id="lnkHome" href="../Default.aspx"
                title="Go to the Home page"><b>Home</b>
                <!--[if gte IE 7]><!--></a>
                <!--<![endif]-->
                <!--[if lte IE 6]>
                <table>
                    <tr>
                        <td>
                            <![endif]--><!--[if lte IE 6]>
                        </td>
                    </tr>
                </table>
                </a><![endif]-->
             </li>

            <li runat="server" id="ApplyNow">
                <a runat="server" id="lnkEditOrder" href="../OrderChinaVisa.aspx" title="Use our Price Calculator and simultaneously begin the China Visa application process!"><b>Apply Now!</b>
                <!--[if gte IE 7]><!--></a>
                <!--<![endif]-->
                <!--[if lte IE 6]>
                <table>
                    <tr>
                        <td>
                            <![endif]--><!--[if lte IE 6]>
                        </td>
                    </tr>
                </table>
                </a><![endif]-->
             </li>
            <li runat="server" id="CheckStatus">
                <a id="lnkCheckStatus" runat="server" href="../Check_Status.aspx"
                title="Check on the status of a placed order"><b>Check Status</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]>
                <table>
                    <tr>
                        <td>
                            <![endif]--><!--[if lte IE 6]>
                        </td>
                    </tr>
                </table>
                </a><![endif]--></li>
            <li runat="server" id="Affiliate">
                <a id="lnkAffiliate" runat="server" href="../Secure/VisaActivity.aspx"
                title=""><b>Affiliate</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]>
                <table>
                    <tr>
                        <td>
                            <![endif]--><!--[if lte IE 6]>
                        </td>
                    </tr>
                </table>
                </a><![endif]--></li>
        </ul>
    </asp:ContentPlaceHolder>
</div>

Answer 1

基本上，条件句使该表对 IE6 及以下浏览器可见。如果您只在 IE6 中遇到问题，您可以使用

的 css 设置

.dropline TABLE
{
    margin: -3px -10px;
    width: 25px;
    border-collapse: collapse;
    height: 17px;
}