Question

我试图将标题中心＆gt;部分。它与chrome和opera一起工作正常，但firefox推向左侧。我创建了一个名为.body的课程width: 960px和margin: 0 auto。它无法识别firefox上的margin: 0 auto（我正在使用firefox 18）。

我已尝试为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;
}

Answer 1

这会改变你的margin: 0 auto;：

.box {
  display: -moz-box;
}

如果只留下<section class="body">，它可以正常工作。 jsfiddle example

Answer 2

答案并不完美但相当方便。

就个人而言，我对浏览器开发团队（微软，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>

Firefox不喜欢带有弹性盒模型的margin auto

2 个答案: