CSS - Schriftart Rendering unterschiedliche Größe abhängig vom Browser des Benutzers verursacht unterschiedliche Menülänge - wie zu beheben?

Question

Die folgende geschieht (font-family:'Arial',sans-serif;):

IE:

Firefox:

Chrome:

Die CSS ist das gleiche für alle Browser - es so ist :

#main_menu ul { 
    height:41px; 
    width:960px; 
    font-size:13px; 
    font-weight:bold; 
    list-style-type:none; 
    display:flex; 
    flex-direction: row; 
} 

#main_menu ul li a { 
    display:block; 
    height:26px; 
    padding:15px 24px 0 24px; 
    line-height:13px; 
    color:#fefefd; 
    border-left:1px solid #7f9f67; 
    border-right:1px solid #466232; 
    text-transform:uppercase; 
    background:url(images/header_menu_bg_inactive.jpg) top center repeat-x; 
    text-shadow:1px 1px 1px #333; 
} 

#main_menu ul li:first-child a { 
    border-left:1px solid #445d32; 
    padding-left:22px; 
} 

#main_menu ul li:last-child a { 
    padding-right:22px; 
} 

Wie Sie sehen können, wurde dies ursprünglich in Chrome erstellt. Wie kann ich dieses lästige Problem für jeden Browser

• ohne bedingte Hacks lösen
• ohne eine feste Größe für jeden Menüpunkt Einstellung

Gibt es eine einfache Lösung?

Answer 1

Sie könnten das Menü als flexible box stylen.

Verwenden Sie die flex Eigenschaft auf den Menüelementen, um jeweils einen gleichen Anteil der verbleibenden Breite zuzuweisen.

#main_menu { 
 
    width: 960px; 
 
} 
 

 
#main_menu ul { 
 
    list-style: none; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 

 
#main_menu ul li { 
 
    -webkit-flex: 1; 
 
    flex: 1; 
 
} 
 

 
#main_menu ul li a { 
 
    display: block; 
 
    background-color: green; 
 
    padding: 4px 8px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    border-right: 1px solid black; 
 
} 
 

 
#main_menu ul li:first-child a { 
 
    border-left: 1px solid black; 
 
    background-color: lightgreen; 
 
}

<div id="main_menu"> 
 
    <ul> 
 
    <li><a>Home</a></li> 
 
    <li><a>Item One</a></li> 
 
    <li><a>Item Two</a></li> 
 
    <li><a>Item Three</a></li> 
 
    <li><a>Item Four</a></li> 
 
    <li><a>Item Five</a></li> 
 
    <li><a>Item Six</a></li> 
 
    </ul> 
 
</div>