Firefox 上的 Div 不在同一行显示答案

【问题标题】：Divs don't display in the same line on FirefoxFirefox 上的 Div 不在同一行显示
【发布时间】：2012-05-03 18:18:56
【问题描述】：

我正在使用 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查看此错误（抱歉，内容是葡萄牙语，因为最近才开始开发）。

【问题讨论】：

标签： css firefox twitter-bootstrap

【解决方案1】：

没有-moz- 前缀的Firefox 不会实现box-sizing。见bugzilla

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

【讨论】：

宽度由 Bootstrap 的 span3 和 span9 类定义。它使用 span12 的网格（12 列）。

【解决方案2】：

你像这样改变你的 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;
}

【讨论】：

对不起，这里div中的错误是我粘贴代码时发生了StackOverflow。服务器中的代码是正确的。另外，所需的可视化是内容 div 右侧的广告 div，而不是下方。

【解决方案3】：

我希望这个小提琴可以帮助你http://jsfiddle.net/9Zf8U/1/我只是在这里添加了firefox css hack，没有任何东西。

【讨论】：

拜托，你能更好地解释一下你做了什么吗？

【解决方案4】：

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

【讨论】：