DIV在FireFox中未正確對齊

IE，Chrome和Safari中的以下HTML和CSS代碼行不一致，但它不在FireFox中排列。我能做些什麼來使它在所有四種主流瀏覽器中都能正常工作？DIV在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; }

來源

2013-03-19 Michael Kniskern

您有相同的** ID **多次。改爲使用** class **。 – Vucko 2013-03-19 22:39:07

儘管你的身份證問題像說Vucko似乎都在我的Firefox和Chrome上工作正常... 您使用的是哪個版本的Firefox？ – Acuao 2013-03-19 22:41:23

它使用Firefox 10.0，但我只是將它更新到19.0.2。 – 2013-03-19 22:56:05

不允許你用相同的ID幾次（subnavtab）。改用類。

刪除所有的浮動屬性，使用text-align：center應用到你的#subnav。這將集中所有的直列塊包含

來源

2013-03-19 22:40:30

我改變了ID爲類，它仍然沒有排隊。＃subnav div爲第一個div的前面和最後一個div的後面增加額外的空間。 – 2013-03-19 23:22:53

.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/

來源

2013-03-20 00:08:15

-1

使用類名稱，而不是ID ，您可以使用類名

示例設置的CSS屬性：

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

來源

2016-02-17 11:56:10 Prabhakaran

DIV在FireFox中未正確對齊

回答

相關問題