CSS - 字體呈現不同大小，取決於用戶的瀏覽器導致不同的菜單長度 - 如何解決？

Question

下面發生的事情（font-family:'Arial',sans-serif;）：

IE：

火狐：

鉻：

的CSS是所有瀏覽器一樣的 - 就是這個樣子：

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

正如你所見，這最初是在Chrome中建立的。我該如何解決這個惱人的問題

• 沒有爲每一個瀏覽器
• 有條件的黑客沒有設置固定的大小爲每個菜單項

有一個簡單的解決方案嗎？

Answer 1

您可以將菜單設置爲flexible box。

使用菜單項上的flex屬性可以獎勵每個剩餘寬度的相等份額。

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