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下。在所有其他浏览器中，广告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

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

此外，您的问题错过了最重要的CSS规则：即每个width的{{1}}。您链接的页面显示div的规则，另一个显示.span9

的规则

Answer 2

您可以像这样更改html（只是div开始标记中的小更改）。我希望你得到我们的输出，如下面的图像

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

enter image description here 好的，你想要喜欢这个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;
}

enter image description here

Answer 3

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

Answer 4

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

Div在Firefox上不显示在同一行

4 个答案: