您好,登錄后才能下訂單哦!
這篇文章主要介紹margin-top在Firefox失效怎么辦,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
margin-top在Firefox失效的解決方法
"collapsingmargins"(折疊margin)的意思是:2個(gè)或以上盒模型之間(關(guān)系可以是相鄰或嵌套)相鄰的margin屬性(這之間不能有非空內(nèi)容、padding區(qū)域、border邊框或使用清除分離方法)結(jié)合表示為一個(gè)單獨(dú)的margin。在css2.1中,水平的margin不會(huì)被折疊。
垂直margin可能在一些盒模型中被折疊:
1.在常規(guī)文檔流中,2個(gè)或以上的塊級(jí)盒模型相鄰的垂直margin會(huì)被折疊。最終的margin值計(jì)算方法如下:
◆全部都為正值,取***者;
◆不全是正值,則都取絕對(duì)值,然后用正值減去***值;
◆沒(méi)有正值,則都取絕對(duì)值,然后用0減去***值。
注意:相鄰的盒模型可能由DOM元素動(dòng)態(tài)產(chǎn)生并沒(méi)有相鄰或繼承關(guān)系。
2.相鄰的和模型中,如果其中的一個(gè)是浮動(dòng)的(floated),垂直margin不會(huì)被折疊,甚至一個(gè)浮動(dòng)的盒模型和它的子元素之間也是這樣。
3.設(shè)置了overflow屬性的元素和它的子元素之間的margin不會(huì)被折疊(overflow取值為visible除外)。
4.設(shè)置了絕對(duì)定位(position:absolute)的盒模型,垂直margin不會(huì)被折疊,甚至和他們的子元素之間也是一樣。
5.設(shè)置了display:inline-block的元素,垂直margin不會(huì)被折疊,甚至和他們的子元素之間也是一樣。
6.如果一個(gè)盒模型的上下margin相鄰,這時(shí)它的margin可能折疊覆蓋(collapsethrough)它。在這種情況下,元素的位置(position)取決于它的相鄰元素的margin是否被折疊。
如果元素的margin和它的父元素的margin-top折疊在一起,盒模型border-top的邊界定義和它的父元素相同。
另外,任意元素的父元素不參與margin的折疊,或者說(shuō)只有父元素的margin-bottom是參與計(jì)算的。如果元素的border-top非零,那么元素的border-top邊界位置和原來(lái)一樣。
一個(gè)應(yīng)用了清除操作的元素的margin-top絕不會(huì)和它的塊級(jí)父元素的margin-bottom折疊。注意,那些已經(jīng)被折疊覆蓋的元素的位置對(duì)其他已經(jīng)被折疊的元素的位置沒(méi)有任何影響;只有在對(duì)這些元素的子元素布局時(shí),border-top邊界位置才是必需的。
7.根元素的垂直margin不會(huì)被折疊。
浮動(dòng)的塊級(jí)元素的margin-bottom總是與它后面的浮動(dòng)塊級(jí)兄弟元素(floatednextin-flowblock-levelsibling)的margin-top相鄰,除非那個(gè)同級(jí)元素使用了清除操作。
浮動(dòng)的塊級(jí)元素的margin-top和它的***個(gè)浮動(dòng)塊級(jí)子元素(floatedfirstin-flowblock-levelchild)的margin-top相鄰(如果該元素沒(méi)有border-top,沒(méi)有padding-top,并且子元素沒(méi)有使用清除操作)。
浮動(dòng)的塊級(jí)元素的margin-bottom如果符合下列條件,那么它和它的***一個(gè)浮動(dòng)塊級(jí)子元素的margin-bottom相鄰(如果該元素沒(méi)有指定padding-bottom或border):
◆指定了height:auto
◆min-height小于元素的實(shí)際使用高度(height)
◆max-height大于元素的實(shí)際使用高度(height)
如果一個(gè)元素的min-height屬性設(shè)置為0,那么它所擁有的margin是相鄰的,并且它既沒(méi)有border-top和border-bottom,也沒(méi)有padding-top和padding-bottom,它的height屬性可以是0或auto,它不能包含一個(gè)內(nèi)聯(lián)的盒模型(linebox),它所有的浮動(dòng)子元素(如果有的話)的margin也都是相鄰的。
當(dāng)一個(gè)元素?fù)碛械膍argin折疊了,并且它使用了清除操作,那么它的margin-top會(huì)和緊隨其后的兄弟元素的相鄰margin折疊,但結(jié)果是它的margin將無(wú)法和其塊級(jí)父元素的margin-bottom折疊。
折疊操作是以padding、margin、border的值為基礎(chǔ)的(即在瀏覽器解析所有這些值之后),折疊后的margin計(jì)算將覆蓋已使用的不同margin的值。
viewsourceprint?
1<dividdivid="d0"style="background-color:#333333;height:500px;"> 2<brstylebrstyle="line-height:0;"/> 3//不加入br這一行,在FIREFOX中id1的margin-top:20px將會(huì)在d0上作用, 使d0上方與body間有20px的間距,d1與d0的上方?jīng)]有間距,而IE內(nèi)正常顯示 4<dividdivid="d1"style="background-color:#000000;margin-top:20px;height:100px;"></div> 5<dividdivid="d2"style="background-color:#000000;margin-top:20px;height:100px;"></div> 6</div>
一個(gè)簡(jiǎn)單的例子就是左右兩個(gè)層,左邊層絕對(duì)定位,右邊層相對(duì)定位,右邊層的margin-top在firefox下會(huì)有問(wèn)題。解決方法就是,在左邊層結(jié)束后,清除一次浮動(dòng)即可。
以上是“margin-top在Firefox失效怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。