|
常見的瀏覽器下margin出現(xiàn)的bug
林林總總寫了那么多，最后總結(jié)一些瀏覽器中常見的margin Bug吧，以后遇到margin下的布局問題可以查看這里找到解決的方案，如果你還發(fā)現(xiàn)其他關(guān)于瀏覽器下margin的Bug你可以發(fā)表留言，核對采納后我會及時添加進(jìn)去，感謝你的分享：
- IE6中雙邊距Bug：
發(fā)生場合：當(dāng)給父元素內(nèi)第一個浮動元素設(shè)置margin-left（元素float:left）或margin-right（元素float:right）時margin加倍。
解決方法：是給浮動元素加上display:inline;CSS屬性；或者用padding-left代替margin-left。
原理分析：塊級對象默認(rèn)的display屬性值是block，當(dāng)設(shè)置了浮動的同時，還設(shè)置了它的外邊距就會出現(xiàn)這種情況。也許你會問：“為什么之后的對象和第一個對象之間就不存在雙倍邊距的Bug”？因為浮動都有其相對應(yīng)的對象，只有相對于其父對象的浮動對象才會出現(xiàn)這樣的問題。第一個對象是相對父對象的，而之后對象是相對第一個對象的，所以之后對象在設(shè)置后不會出現(xiàn)問題。為什么display:inline可以解決這個雙邊距bug，首先是 inline元素或inline-block元素是不存在雙邊距問題的。然后，float:left等浮動屬性可以讓inline元素 haslayout，會讓inline元素表現(xiàn)得跟inline-block元素的特性一樣，支持高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個display inline的元素上。
- IE6中浮動元素3px間隔Bug：
發(fā)生場合：發(fā)生在一個元素浮動，然后一個不浮動的元素自然上浮與之靠近會出現(xiàn)的3px的bug。
解決方法：右邊元素也一起浮動；或者為右邊元素添加IE6 Hack _margin-left:-3px;從而消除3px間距。
原理分析：IE6瀏覽器缺陷Bug。
- IE6/7負(fù)margin隱藏Bug：
發(fā)生場合：當(dāng)給一個有hasLayout的父元素內(nèi)的非hasLayout元素設(shè)置負(fù)marin時，超出父元素部分不可見。
解決方法：去掉父元素的hasLayout；或者賦hasLayout給子元素,并添加position:relative;
原理分析：iE6/7獨有的hasLayout產(chǎn)生問題。
- IE6/7下ul/ol標(biāo)記消失bug：
發(fā)生場合：當(dāng)ul/ol觸發(fā)了haslayout并且是在ul/ol上寫margin-left，前面默認(rèn)的ul/ol標(biāo)記會消失。
解決方法：給li設(shè)置margin-left，而不是給ul/ol設(shè)置margin-left。
原理分析：IE6/7瀏覽器Bug
- IE6/7下margin與absolute元素重疊bug：
發(fā)生場合：雙欄自適應(yīng)布局中，左側(cè)元素absolute絕對定位，右側(cè)的margin撐開距離定位。在IE6/7下左側(cè)應(yīng)用了absolute屬性的塊級元素與右邊的自適應(yīng)的文字內(nèi)容重疊。
解決方法：把左側(cè)塊級元素更改為內(nèi)聯(lián)元素，比如把div更換為span。
原理分析：這是由于IE6/IE7瀏覽器將inline水平標(biāo)簽元素和block水平的標(biāo)簽元素沒有加以區(qū)分一視同仁渲染了。屬于IE6/7瀏覽器渲染Bug。
- IE6/7/8下auto margin居中bug：
發(fā)生場合：給block元素設(shè)置margin auto無法居中
解決方法：出現(xiàn)這種bug的原因通常是沒有Doctype，然后觸發(fā)了ie的quirks mode，加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個width能夠解決，但根據(jù)本人親測，加 with此種方法是無效的，如果沒有Doctype即使給元素添加width也無法讓block元素居中。
原理分析：缺少Doctype聲明。
- IE8下input[button | submit] 設(shè)置margin:auto無法居中
發(fā)生場合：ie8下，如果給像button這樣的標(biāo)簽（如button input[type="button"] input[type="submit"]）設(shè)置{ display: block; margin:0 auto; }如果不設(shè)置寬度的話無法居中。
解決方法：可以給為input加上寬度
原理分析：IE8瀏覽器Bug。
- IE8百分比padding垂直margin bug：
發(fā)生場合：當(dāng)父元素設(shè)置了百分比的padding，子元素有垂直的margin的時候，就好像父元素被設(shè)置了margin一樣。
解決方法：給父元素加一個overflow:hidden/auto。
原理分析：IE8瀏覽器Bug
原文鏈接：http://www.hicss.net/do-not-tell-me-you-understand-margin/
本文鏈接：http://www.95time.cn/tech/web/2011/8472.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 不要告訴我你懂margin [3] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 不要告訴我你懂margin [4]
