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不喜欢保证金自动与灵活框模型

回答

相关问题