今天在做登錄頁面的時(shí)候發(fā)現(xiàn)個(gè)margin-top的bug ;

初始代碼如下：

html:

<div class="logo"></div>

<div class="login_text">

<div id="error" class="errorstyle"></div>

</div>

css:

.errorstyle {

height:20px;

width:225px;

background-color:#FFCCCC;

color:#F00;

font-size:12px;

border:#FF0000 solid 1px;

margin-top:10px; /* 注意這里 */

}

結(jié)果發(fā)現(xiàn)IE6.IE7正常，ie8,FF顯示錯(cuò)誤。

癥結(jié)：當(dāng)兩個(gè)容器嵌套時(shí),如果外層容器和內(nèi)層容器之間沒有別的元素,firefox會(huì)把內(nèi)層元素的margin-top作用于父元素。

解決方案：

1、使用浮動(dòng)來解決，即將子層代碼改為：

.errorstyle {

height:20px;

width:225px;

background-color:#FFCCCC;

color:#F00;

font-size:12px;

border:#FF0000 solid 1px;

margin-left:90px;

display:inline;

/* 以下代碼修正FF和ie8的margin-top bug */

margin-top:10px;

float:left;

}

2、使用padding-top來解決(因?yàn)镕F盒模型問題，不推薦使用)

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的托管服務(wù)器,四川各地服務(wù)器托管,托管服務(wù)器、多線服務(wù)器托管.托管咨詢專線：18980820575

網(wǎng)站題目：關(guān)于DIV多層嵌套的margin-top的BUG
文章位置：http://www.rwnh.cn/article2/schsic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、靜態(tài)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站改版、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)