html - 使用 Foundation 4 的均匀间隔导航 - 在 Firefox 中损坏

Question

我正在使用 Foundation 4 的内置导航组件，并且我正在使用 table/table-cell css 技巧来均匀地间隔水平元素并对其进行样式设置。但是我在 Firefox 上碰壁了。以下示例在除 Firefox 之外的所有浏览器中完全符合我的要求，但我终其一生都无法弄清楚。

我已将示例上传到我的服务器：请参阅此处的实时示例

这是 Safari 中的示例：

这在 Firefox 中也是一样的：

你能给我的任何帮助我都会非常感激！

谢谢！

Answer 1

在这些 css 中进行更改以在 firefox 中修复它我只在 firefox 中测试过

*, *:before, *:after {
-moz-box-sizing: border-box;
vertical-align: middle;

}

.top-bar .dropdown {
background: none no-repeat scroll 0 0 #8D8C8C;
text-align: center;
width: 17.2%;

}

.top-bar-section .dropdown li {
height: auto;
width: 100%;

}

.top-bar-section ul {
display: inline;
height: auto !important;
width: 100%;

}

.top-bar-section .dropdown {
left: 0;
top: auto;

}