css - DIV 在 FireFox 中未正确对齐

Question

以下 HTML 和 CSS 代码在 IE、Chrome 和 Safari 中排列，但在 FireFox 中不排列。我该怎么做才能让它在所有四种主要浏览器中都工作？

HTML：

<div id="subnav">
    <div id="subnavtab"><a href="">Plan Your Visit</a></div>
    <div id="subnavtab"><a href="">Tour the Museum</a></div>
    <div id="subnavtab"><a href="">Program & Events</a></div>
    <div id="subnavtab"><a href="">Membership</a></div>
    <div id="subnavtab"><a href="">Donate</a></div>
</div>
<div id="featuredexhibit">
    Featured Exhibit - this can be a rotating menu of exhibits
</div>

CSS：

#subnav { margin-top: 20px; width: 740px; text-align: center; }
.subnavtab { background-color: #A1CD3A; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; } 
#featuredexhibit { width: 740px; height: 200px; background-color: #A7A9AC; margin: 0; clear: both; }

Answer 1

您不能多次使用相同的 id (subnavtab)。改用类。

删除所有浮动属性，使用 text-align: center 应用于您的#subnav。这将使您包含的所有内联块居中

Answer 2

.subnavtab {
    box-sizing: border-box;
    background-color: #A1CD3A;
    padding: 10px 10px 10px 10px;
    display: inline-block;
    width: 20%;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

这是完整的代码：http: //jsfiddle.net/7tjmZ/2/

Answer 3

使用类名而不是 id，您可以使用类名设置 css 属性

例子：

.yourClassName
{
    background-color: #A1CD3A;
    padding: 10px 10px 10px 10px;
    margin: 0 5px 0 0;
    display: inline-block;
}