僅在FireFox文檔頂部附近出現不明空間

我遇到了一個問題，即正在應用於div的邊距似乎也應用於文檔主體，僅限於FireFox。僅在FireFox文檔頂部附近出現不明空間

一些在網上搜索似乎引用了崩潰的邊際，雖然可能是這樣，但我不認爲我完全理解發生了什麼。

我已經創建了一個示例http://jsfiddle.net/davidwkennedy/3BQrw/（在FF中查看，然後是任何其他瀏覽器進行比較）。

<body> 
    <form id="form1" action="nothing"> 
    <div> 
     <div> 
      <p style="float:left; border:solid 1px red">Why is this text not anchored at the top of the page?</p> 
      <div style="clear:both;"> </div> 
     </div> 
    </div> 
    <div style="margin-top:100px;"> 
     <p>hello world</p> 
    </div> 
    </form>

可能有人請幫助我理解這是怎麼回事？

感謝

（編輯：它已經有一段時間，因爲我問這個，但我想在Firefox的版本更新，我不記得我是用什麼，當我最初寫這個，但這個問題是仍然發生在26.0）

來源

2013-04-05 Dave Kennedy

這爲什麼我不喜歡漂浮物 – 2013-04-05 20:43:40

這是因爲邊緣崩潰，但如果我知道爲什麼會生氣，如果你開始爲div添加邊框，喲你可以看到邊距消失：http://jsfiddle.net/3BQrw/1/ – cimmanon 2013-04-05 20:47:12

它與崩潰邊距有關。將overflow:auto添加到您的表單中，您會看到問題消失。

jsFiddle example

來源

2013-04-05 20:47:54 j08691

完美的作品，但我仍然不明白（一）爲什麼FireFox - 有什麼不同，它是渲染引擎造成這種情況？（b）雖然我認爲我理解了利潤率下降的基本概念，但我不明白它會如何導致這個特定問題 - 以及如何消除浮動與摺疊利潤率相互作用？ – 2013-04-05 21:02:18

我也不確定，它似乎是與100px的邊緣導致它的div。刪除（不使用溢出規則），它也恢復正常。我會說它看起來很奇怪，尤其是Chrome的行爲如預期的那樣，FF似乎增加了額外的空間，看起來不需要存在。 – j08691 2013-04-05 21:06:56

這真的很奇怪。這是告訴你，當你從p中刪除浮動按預期工作。

由於某些原因，當Firefox計算出正文邊距崩潰時，它將該邊距添加到正文而不是子元素。我猜想這是一個小故障，雖然我沒有仔細檢查規格。

確實是一個小故障的部分是，Firefox並沒有完全計算應用於子div的clear:both，因爲如果它做了hello world margin collapse，將不會應用到body。當一個孩子p被設置爲float時，外部包含div將自動設置爲clear:none，這很奇怪，但是是預期的。但是，當第二個子div設置爲clear:both時，顯然有些東西會變得棘手。我懷疑你會找到該部分的合理答案，因爲它幾乎肯定是Firefox渲染中的一個錯誤。長篇故事，你可能在Firefox的渲染過程中發現了一個，但兩個錯誤。

來源

2013-04-05 21:14:47 Elimn

*{margin:0; padding:0;}的一切，能給風格每個或給剛剛爲您的表單「form {margin:0; padding:0;}

來源

2013-04-05 21:20:02

您可能需要一個CSS復位。我用這一個，由埃裏克·邁耶編碼。這是最好的射手。嘗試使用此每個站點啓動建設。下面是CSS代碼（將它總是在主CSS的頂部或作爲主CSS裏面@import）。這爲我工作在你的小提琴！好運！

a, abbr, acronym, address ,applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var { 
    background: transparent; 
    border: 0 none; 
    font-size: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    vertical-align: top; 
} 

ul {list-style: none; } 
blockquote, q {quotes: none; } 

table, table td { 
    padding: 0; 
    border: none; 
    border-collapse: collapse; 
} 

img {vertical-align: top; } 

embed {vertical-align: top; } 

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display: block; } 

mark, rp, rt, ruby, summary, time{display: inline; }

來源

2013-04-05 21:54:44

僅在FireFox文檔頂部附近出現不明空間

回答

相關問題