html - CSS - 根据用户的浏览器呈现不同大小的字体会导致不同的菜单长度 - 如何解决？

Question

发生以下情况(font-family:'Arial',sans-serif;):

即:

火狐:

Chrome :

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>