建站
咨詢
售后
建站咨詢
新聞中心
你對于margin雙倍邊距Bug問題是否熟悉，這里和大家分享一下IE6下margin雙倍邊距Bug的處理辦法，相信本文介紹一定會讓你有所收獲。
創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設、營銷型網(wǎng)站制作、響應式網(wǎng)站開發(fā)、展示型成都網(wǎng)站建設、成都網(wǎng)站制作等服務，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設與網(wǎng)站營銷推廣問題。
IE6下margin雙倍邊距Bug的處理辦法
一、什么是雙邊距Bug？
先來看圖：
我們要讓綠色盒模型在藍色盒模型之內(nèi)向左浮動，并且距藍色盒模型左側(cè)100像素。這個例子很常見，比如在網(wǎng)頁布局中，側(cè)邊欄靠左側(cè)內(nèi)容欄浮動，并且要留出內(nèi)容欄的寬度。要實現(xiàn)這樣的效果，我們給綠色盒模型應用以下CSS屬性：
以下為引用的內(nèi)容：
- .floatbox{
- float:left;
- width:150px;
- height:150px;
- margin:5px05px100px;
- /*外邊距的***一個值保證了100像素的距離*/
- }
很簡單，但是當我們在IE6中查看時，會發(fā)現(xiàn)左側(cè)外邊距100像素，被擴大到200個像素。如下圖：
二、怎么會這樣？
說實話，這個原因還真是不清楚。但是這樣的結(jié)果確確實實在IE6中出現(xiàn)了。而且這種情況出現(xiàn)的條件是當浮動元素的浮動方向和浮動邊界的方向一致時才會出現(xiàn)。如同上面的例子一樣，元素向左浮動并且設置了左側(cè)的外邊距出現(xiàn)了這樣的雙邊距bug。同理，元素向右浮動并且設置右邊距也會出現(xiàn)同樣的情況。同一行如果有多個浮動元素，***個浮動元素會出現(xiàn)這個雙邊距bug，其它的浮動元素則不會。
三、如何修正這個Bug？
很簡單，只需要給浮動元素加上display:inline;這樣的CSS屬性就可以了。就這么簡單？對，就這么簡單。如下圖：
CSS代碼如下：
以下為引用的內(nèi)容：
- .floatbox{
- float:left;
- width:150px;
- height:150px;
- margin:5px05px100px;
- display:inline;
- }
【編輯推薦】
- Firefox下margin-top失效解決技巧
- CSS中margin邊界疊加問題及解決方案
- CSS樣式表高效使用八大秘訣
- 創(chuàng)建和插入CSS樣式表秘笈
- 實現(xiàn)CSS垂直居中的五大方法及優(yōu)缺點
標題名稱：IE6下margin雙倍邊距Bug處理辦法
網(wǎng)站URL：http://www.5511xx.com/article/dphpijs.html
