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

您可以将菜单样式设置为灵活的框。

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