mozilla和chrome的結構佈局差異

我有這個簡單的網站，它適用於IE和Chrome，但它在Firefox中有點時髦。我有一個div，它是一個黃色的矩形和一個導航欄，它位於頂部，但由於某種原因，firefox將導航向右移動到div下面。下面是我的代碼有：mozilla和chrome的結構佈局差異

<section> 
<div id="wrapper"> 
<nav id="flexbox"> 
    <div><a href="gallery.html">Gallery</a></div> 
    <div><a href="events.html">Events</a></div> 
    <div><a href="default.html">Home</a></div> 
    <div><a href="membership.html">Membership</a></div> 
    <div><a href="contactus.html">Contact Us</a></div> 
</nav> 
</div> 
</section>

與下面的CSS：

section { 
    max-width:100%; 
    margin:-2px; 
    padding:-2px; 
    border:-2px; 
} 

#wrapper { 
    max-height:40px; 
    width:90%; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#f5b00e; 
} 

#flexbox { 
    margin-top: 40px; 
    display:-ms-flexbox; 
    display:-webkit-box-flex; 
    width:65%; 
    min-width:600px; 
    max-height:40px; 
    -ms-flex-pack:distribute; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#f5b00e; 

    -webkit-box-flex:1.0; 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    -webkit-box-pack:center; 
    -webkit-box-align:center; 

    -moz-box-flex:1.0; 
    display:-moz-box; 
    -moz-box-orient:horizontal; 
    -moz-box-pack:center; 
    -moz-box-align:center; 
} 

#flexbox > div { 
    min-height: 20px; 
    min-width: 80px; 
    margin: 5px; 
    text-align:right; 

    -webkit-box-flex:1.0; 
    display:-webkit-box; 

    -moz-box-flex:1.0; 
    display:-moz-box; 
}

來源

2013-01-16 nvncbl

爲什麼要限制「包裝紙」的高度，然後將「flexbox」推到頁邊的外側？ –

@Diodeus - 謝謝，那是一個愚蠢的錯誤。我很驚訝它在鉻和ie工作。你知道爲什麼嗎？ – nvncbl

@Diodeus - 你知道爲什麼mozilla也是唯一一個沒有將flexbox水平居中的嗎？保證金：汽車;也沒有工作。 – nvncbl

如果你想創建一個Firefox的一些CSS規則，只有你可以添加以下到您的樣式表，並把火狐只有在它的風格，見下面的例子：

@-moz-document url-prefix() { 
    .body a { 
    color:red; 
    } 
}

一般來說，如果Firefox是拒絕做你問，比如它不允許背景位置，所以我用我，你應該只使用這個作爲最後的手段t在這種情況下加載一個不同的背景圖像大小隻適用於Firefox用戶。

來源

2013-01-16 23:57:15 matt

感謝您的提示。這絕對是有所作爲的，但它仍然沒有將div箱中的flexbox居中，它仍然明顯靠近左側。有任何想法嗎？ – nvncbl

mozilla和chrome的結構佈局差異

回答

相關問題