菜单控件在环境之间以不同方式构建和呈现

时间:2013-05-14 10:04:48

标签: asp.net css aspmenu-control

我在页面上放了以下菜单控件:

<div class="Phase2MenuContainer">
    <asp:Menu runat="server" ID="mnuHome" Orientation="Vertical"
        StaticMenuStyle-CssClass="Phase2Menu">
        <Items>
            <asp:MenuItem Selectable="true" Text="Download Sketch Sheet" NavigateUrl="~/Documents/Sketch Sheet.pdf" Target="_blank"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Create Data Sheet" NavigateUrl="CreateDataSheet.aspx"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Personalize Data" NavigateUrl="Personalize.aspx" Enabled="false"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>

当我在我的localhost上运行它时,它使用表构建,这很好,因为我在编写CSS时知道这一点。

这里的问题是,当我将它复制到实时环境时,它会使用spans和div构建,所以我的所有css都崩溃了。

这是css(实时副本只删除了margin: 5px 0;行)

.Phase2MenuContainer
{
    width: 250px;
    margin: 15px auto;
}
.Phase2Menu a, .Phase2Menu span a
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;
    background: #018CD2;
    border: 1px solid #0159a0;
}
.Phase2Menu a[disabled=true], .Phase2Menu span[disabled=disabled]
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;    
    background: #c1c1c1;
    border: 1px solid #0159a0;
}
.Phase2Menu a:not([disabled=true]):hover
{
    background: #3B3486;
}

我花了大约半个小时来修复它,但我现在正在使用它(虽然实时样式表与我的测试样式表不同)。

有人可以向我解释为什么菜单在我的本地主机和实时服务器之间有不同的构建方式吗?我确信如果做得不对,这实际上不应该发生......

2 个答案:

答案 0 :(得分:2)

RenderingMode的{​​{1}}设置为Menu ..就像这样。因此,它始终会将您的Table呈现为表格...

Menu

答案 1 :(得分:0)

我两天前遇到过相同的解决方案,不幸的是,由于ASP.NET支持的版本,RenderingMode无法在我的项目中工作。因此,作为替代解决方案,我将菜单放在div控件中并将样式表设置如下。

.div br {
    display: none;
}

希望这可能有所帮助。