css - FirefoxではDivが同じ行に表示されない

Question

BootstrapとカスタムCSSを使用して個人のWebサイトを開発していますが、次のHTMLコードを使用して、2つの列を持つコンテンツ部分を生成しています。

<div class="row-fluid">
    <div id="content" class="span9">
        content
    </div>
    <div id="ads" class="span3">
        ads
    </div>
</div>

これはすべてのブラウザで機能しますが、次のCSSでは、Firefoxで表示したときにadsdivがcontentdivの下に表示されます。他のすべてのブラウザでは、広告divはコンテンツdivの右側に保持されます（これは正しい表示です）。

#content{
    margin-top:2em;    
    padding: 1em;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
    border: 2px solid #EEF;
}

#ads{
    margin-top:2em;            
    padding: 1em;
    box-sizing: border-box;
    border-radius:15px;
    border: 2px solid #EEF;
}

これは、パディングと境界線が原因で発生すると思いますが、他のすべてのブラウザは正しく表示されます。それで、Firefoxでこれを修正する方法はありますか？

必要に応じて、このエラーはhttp://www.dinhani.com.brで確認できます（申し訳ありませんが、最近開発が開始されたため、コンテンツはポルトガル語になっています）。

Answer 1

Firefoxはプレフィックスbox-sizingなしでは実装できません。bugzilla-moz-を参照してください

また、あなたの質問は最も重要なCSSルール、つまりwidthそれぞれのルールを見逃していましたdiv。リンク先のページには.row-fluid > .span3、.span9のルールと別のルールが表示されます

Answer 2

このようにHTMLを変更します（div開始タグを少し変更するだけです。下の画像のような出力が得られることを願っています

<div class="row-fluid">
     <div id="content" class="span9">
         content
     </div>
     <div id="ads" class="span3">
         ads
     </div>
 </div>

わかりました、このimage2が好きになりたいです

#content{
    margin-top:2em;    
    padding: 1em;
    box-sizing: border-box;
    border-radius: 20px ;
    border: 2px solid #EEF;
    float:left;
}

#ads{
    margin-top:2em;            
    padding: 1em;
    box-sizing: border-box;
    border-radius:15px;
    border: 2px solid #EEF;
    float: left;
} 

Answer 3

このフィドルがお役に立てば幸いですhttp://jsfiddle.net/9Zf8U/1/ここにfirefoxcssハックを追加しましたが、何もわかりません。

Answer 4

（mozブラウザ）のみにcssハックを追加します。