Mozilla Firefox瀏覽器CSS盒模型奇怪的問題

嘗試下面的示例代碼：Mozilla Firefox瀏覽器CSS盒模型奇怪的問題

<div style="background-color:#ddd"> 
<div style="width:900px; margin:0px auto"> 

    <div class="row"> 
     <div class="col" style="float:left; width:900px"> 
      <h1>Title</h1> 
     </div> 

     <div style="clear:both"></div> 
    </div> 
</div> 
</div> 


<div style="background-color:#cfc"> 
<div style="width:900px; margin:0px auto"> 

    <div class="row" style="margin-top:10px; border:1px solid #f00"> 
     <div class="col" style="float:left; width:900px"> 
      <h2>Content</h2> 
     </div> 

     <div style="clear:both"></div> 
    </div> 

</div> 
</div> 

<div style="background-color:#cfc;"> 
<div style="width:900px; margin:0px auto"> 

    <div class="row" style="margin-top:50px; border:1px solid #f00"> 
     <div class="col" style="float:left; width:900px"> 
      <h2>Content 2</h2> 
     </div> 

     <div style="clear:both"></div> 
    </div> 

</div> 
</div>

怪異的問題後，我設置的內容塊的div.row有邊距：10px的，標題欄將移動從瀏覽器頂部向下10px。任何解決方法來解決這個問題？

注意：沒有加載外部樣式表。

來源

2012-02-13 poh

確實只有火狐出現此問題？ – BoltClock 2012-02-13 15:31:56

我在Google Chrome上試過了，它工作正常。標題塊只是粘在網頁瀏覽器的頂部。內容塊與標題塊的底部之間具有10px的邊距。 – poh 2012-02-13 15:34:07

父稱號的div添加以下CSS display: inline-block;

演示：http://jsfiddle.net/HvStn/

來源

2012-02-13 15:32:36 Sotiris

你好，感謝你的建議。不知何故，我需要div塊的溢出屬性，尤其是標題塊是可見的。它用作網頁的標題部分，其中包含一個下拉菜單。 – poh 2012-02-13 15:36:51

@poh另一個解決方案可以添加到第一個包含標題「div：inline-block」的div中：http://jsfiddle.net/HvStn/ – Sotiris 2012-02-13 15:40:06

非常感謝！顯示：內聯塊;寬度：100％似乎克服了Firefox中的問題:) – poh 2012-02-13 15:45:47

Mozilla Firefox瀏覽器CSS盒模型奇怪的問題

回答

相關問題