2012-04-16 124 views
0

我使用Bootstrap和自定義CSS來開發我的個人網站,並且我有以下HTML代碼來生成包含兩列的內容部分。Div在Firefox上不顯示在同一行上

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

這適用於所有瀏覽器,但是使用以下CSS,廣告div在Firefox中查看時位於內容div下。在所有其他瀏覽器中,廣告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中查看此錯誤(對不起,內容是用葡萄牙語,因爲最近開發了這些內容)。

回答

1

Firefox不執行box-sizing機智有一個-moz-前綴。請參閱bugzilla

此外,您的問題缺少最重要的CSS規則:即每個divwidth。您鏈接到節目規則.row-fluid > .span3,另一個用於.span9

+0

寬度由Bootstrap的span3和span9類定義。它使用span12(12列)的網格。 – 2012-04-16 12:04:59

+0

-moz-前綴解決了這個問題。謝謝。 – 2012-04-16 12:13:48

0

你改變你的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 確定我們像圖像輸出要喜歡這個圖像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; 
} 

enter image description here

+0

對不起,這裏的div中的錯誤是當我粘貼代碼時發生StackOverflow。服務器中的代碼是正確的。此外,所需的可視化效果是內容div右側的廣告div,而不是下面。 – 2012-04-16 11:24:14

0

頁我希望這個小提琴可以幫助你http://jsfiddle.net/9Zf8U/1/我只是增加了Firefox的CSS破解這裏並沒有什麼eals。

+0

請你能更好地解釋你做了什麼? – 2012-04-16 12:02:38

0

僅爲(moz瀏覽器)添加css hacks。