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(子导航标签)。改用类。

删除所有 float 属性，使用 text-align: center 应用于您的#subnav。这将使您所有的内联 block 居中