Firefox不喜歡保證金自動與靈活框模型

我想中心標題>部分。它適用於Chrome和Opera，但Firefox會推向左側。我創建了一個名爲.body的課程，其中width: 960px和margin: 0 auto。它不承認Firefox上的margin: 0 auto（我使用的是Firefox 18）。Firefox不喜歡保證金自動與靈活框模型

我已經嘗試將display的值設置爲inline-block的.body類。它會確定它的位置，但它會將nav設置爲底部（適用於所有瀏覽器）。

這就是我要做的

HTML

<header id="header"> 
<section class="body box"> 
    <section class="flex1"> 
    <a>MyWebsiteName</a> 
    </section> 
    <nav class="nav-list flex1"> 
    <ul> 
     <li> 
     <a href="">Login</a> 
     </li> 
     <li><a href="">Register</a></li> 
     <li><a href="">Help</a></li> 
    </ul> 
    </nav> 
</section>

CSS

.box { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -o-box; 
    display: box; 
-webkit-flex-direction: row; 
-mox-flex-direction: row; 
flex-direction: row; 
-webkit-box-align: center; 
-moz-box-align: center; 
-o-box-align: center; 
box-align: center; 
} 

.flex1 { 
-webkit-box-flex: 1; 
-moz-box-flex: 1; 
-o-box-flex: 1; 
box-flex: 1; 
} 

.body { 
    clear: both; 
    width: 960px; 
    margin: 0 auto; 
} 

header { 
    background: #0C2C52; 
    box-shadow: 0 0 .2em .1em rgb(78, 76, 76); 
-webkit-box-shadow: 0 0 .2em .1em rgb(78, 76, 76); 
-moz-box-shadow: 0 0 .2em .1em rgb(78, 76, 76); 
margin-bottom: 1em; 
padding: 1em 0; 
} 

header > section { 
    height: inherit; 
} 

#header section.flex1 { 
    display: inline-block; 
} 

.nav-list {} 

.nav-list > ul { 
    float: right; 
}

來源

2013-02-19 SherCoder

您是否嘗試過只用'<段類= 「體」>'？ – Morpheus 2013-02-19 08:37:55

這是改變你的位：

.box { 
    display: -moz-box; 
}

它工作正常，如果你只離開<section class="body">。 jsfiddle example

來源

2013-02-19 08:44:03 Morpheus

讓它出現在中間，但它將'ul'列表向下推。 – SherCoder 2013-02-19 09:36:48

你想要你的'ul'出現在哪裏？ – Morpheus 2013-02-19 09:59:28

我想水平對齊它們 – SherCoder 2013-02-19 19:11:12

答案並不完美，但相當方便。

就我個人而言，瀏覽器開發團隊（微軟，Mozilla等）對於他們的應用程序的HTML接口規劃沒有很好地發揮作用感到沮喪。 W3C根本無法對這些公司實施強制執行：對我們來說這是一個主要缺點，現在接近2014年，仍然存在這些荒謬的咕嚕聲水平問題。作爲商業界的十年，我有點不高興。請參閱回答以下...（相應地設置寬度）

回答

<style type="text/css"> 
    .box_wrap{margin:0 auto;width:50%;} 
</style> 

<div class="box_wrap"> 
    <div class="your_flex_box"> ... </div> 
</div>

來源

2013-12-19 21:09:44 axiom82

Firefox不喜歡保證金自動與靈活框模型

回答

相關問題