css - Firefox 上的 Div 不在同一行显示

Question

我正在使用 Bootstrap 和自定义 CSS 来开发我的个人网站，并且我有以下 HTML 代码来生成包含两列的内容部分。

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

这适用于所有浏览器，但使用以下 CSS 时，在 Firefox 中查看时，广告 div 位于内容 div 下方。在所有其他浏览器中，ads div 保留在 content 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实现-moz-。见bugzilla

此外，您的问题错过了最重要的 CSS 规则：即width每个div. .row-fluid > .span3您链接到的页面显示.span9 的规则和另一个

Answer 2

仅为（moz 浏览器）添加 css hack。

Answer 3

你像这样改变你的 html （只是 div 开始标签的小改动。我希望你得到我们的输出，如下图所示

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

好的，你想喜欢这张图片2

#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 4

我希望这个小提琴可以帮助你http://jsfiddle.net/9Zf8U/1/我刚刚在这里添加了 firefox css hack 并没有任何效果。