1

IE と chrome でうまく動作するこのシンプルな Web サイトがありますが、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;
}
4

1 に答える 1

0

Firefox のみの CSS ルールをいくつか作成したい場合は、スタイル シートに次を追加し、その中に Firefox のみのスタイルを入れることができます。以下の例を参照してください。

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

通常、これは最後の手段としてのみ使用する必要があります。たとえば、背景の位置が許可されていないなど、Firefox が要求どおりに実行することを拒否している場合にのみ使用する必要があります。

于 2013-01-16T23:57:15.367 に答える