Question

我正在尝试在CSS中构建一个相同的水平菜单，这在IE9等旧浏览器中仍然受支持。（是的，我知道......）

使用较新的CSS3技术在FF和Chrome上进行测试并且工作出色！在IE9中尝试过，因为我们仍然需要支持它......并且失败了。

我四处搜索，发现其中一些链接可以解决这个问题......

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

horizontal menu with auto width and same dimension of the tabs

...但是，如果菜单项的数量发生变化，您需要更改CSS或满足多个声明的X个菜单项...

是否有一个简单的案例涵盖了所有支持IE9并且仍然与新浏览器兼容而不影响它们的案例？（即：IE9的特殊样式表）

感谢。

Answer 1

如果我正确理解了您的问题，您可以使用display: table和display: cell，如下所示：

.menu {
  display: table;
  padding: 0;
  width: 100%;
}

.menu-item {
  display: table-cell;
  list-style: none;
  margin: 0;
}

<ul class="menu">
  <li class="menu-item">Option 1</li>
  <li class="menu-item">Option 2</li>
  <li class="menu-item">Option 3</li>
  <li class="menu-item">Option 4</li>
</ul>

CSS中的等水平菜单（旧版支持）

1 个答案: