contrôle Menu construit et rend différemment entre les environnements

Question

je mets le contrôle de menu suivant sur ma page:

<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> 

Quand je lance sur mon localhost, il construit avec des tables qui est bien parce que je savais que quand je l'ai écrit mon css.

Le problème ici est que lorsque je l'ai copié dans l'environnement en direct, il construit avec des travées et des divs, donc tout mon CSS s'est cassé.

Voici le css (la copie en direct enlève juste les margin: 5px 0; lignes)

.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; 
} 

Il m'a fallu environ une demi-heure pour réparer, mais je l'ai eu travaille maintenant (même si la feuille de style en direct est différent de mon test un).

Quelqu'un peut-il m'expliquer pourquoi le menu a été construit différemment entre mon hôte local et le serveur live? Je suis sûr que cela ne devrait pas se produire si cela a été fait correctement ...

Answer 1

Réglez le RenderingMode de Menu à Table ..comme ça. Ainsi, il sera toujours rendre votre Menu comme la table ...

<asp:Menu runat="server" ID="mnuHome" Orientation="Vertical" RenderingMode="Table" 
     StaticMenuStyle-CssClass="Phase2Menu"> 

Answer 2

J'ai fait face à la même solution il y a deux jours et, malheureusement, RenderingMode ne fonctionnait pas dans mon projet, en raison de version prise en charge ASP.NET. Par conséquent, comme une solution alternative, je mets le menu dans le contrôle div et place la feuille de style comme ci-dessous.

.div br { 
    display: none; 
} 

Espérons que cela puisse vous être utile.