我在我的页面上放置了以下菜单控件:
<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>
当我在本地主机上运行它时,它使用表构建,这很好,因为我在编写 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;
}
我花了大约半个小时来修复它,但我现在可以正常工作了(尽管实时样式表与我的测试样式表不同)。
谁能向我解释为什么我的本地主机和实时服务器之间的菜单构建不同?我敢肯定,如果正确完成,这实际上不应该发生...