Mozilla和chrome的结构布局差异

Question

我有一个在 ie 和 chrome 上运行良好的简单网站，但在 Firefox 中有点时髦。我有一个 div，它是一个黄色矩形和一个导航栏，其顶部的颜色相同，但由于某种原因，firefox 将导航移动到 div 的正下方。这是我的代码：

<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;
}

Answer 1

如果您只想为 firefox 创建一些 CSS 规则，您可以将以下内容添加到您的样式表中，并将仅 firefox 的样式放入其中，请参见下面的示例：

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

通常，如果 Firefox 拒绝按照您的要求执行操作，例如它不允许背景位置，那么您应该仅将其用作最后的手段，因此我在这种情况下使用它来加载仅适用于 Firefox 用户的不同大小的背景图像。