本篇內(nèi)容主要講解“DIV+CSS網(wǎng)頁錯(cuò)位的原因及怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“DIV+CSS網(wǎng)頁錯(cuò)位的原因及怎么解決”吧!

創(chuàng)新互聯(lián)建站從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元固陽做網(wǎng)站,已為上家服務(wù),為固陽各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

常常我們會(huì)遇到我們要設(shè)置在一行顯示的布局，卻因?yàn)榉N種原因造成了錯(cuò)位，看到結(jié)果是在一行的最后一個(gè)盒子布局錯(cuò)位掉下去了（如下圖）。

錯(cuò)位一 3錯(cuò)位掉落與1和2下方

錯(cuò)位二 網(wǎng)頁布局錯(cuò)位示范

造成DIV CSS網(wǎng)頁布局錯(cuò)位的原因大概有兩種情況，一種是寬度計(jì)算錯(cuò)誤，一種是IE BUG造成，特別是IE6和IE7。接下來我們挨著為大家介紹錯(cuò)位與解決錯(cuò)位方法。

一、寬度計(jì)算錯(cuò)誤解決方法  

寬度計(jì)算錯(cuò)誤，假如總寬度為500px，有3個(gè)盒子，分別css寬度為200px、200px、100px，這個(gè)沒問題會(huì)在一排顯示不會(huì)錯(cuò)位，但如果加入了css邊框、padding、margin屬性時(shí)，別忘記這幾個(gè)屬性所占的寬度。特別是padding與邊框border占用寬度空間不要忽略了。如果有一個(gè)盒子加入左右邊框，這個(gè)時(shí)候有一個(gè)盒子中剛合適的寬度條件下減少2px邊框占用寬度，否則即會(huì)總3個(gè)盒子合計(jì)寬度大于了總寬度，造成錯(cuò)位。

寬度問題造成CSS布局錯(cuò)位小結(jié)：
內(nèi)盒子寬度之和大于了外寬度造成錯(cuò)位，檢查時(shí)候我們一定計(jì)算設(shè)置寬度、邊框、paddind、margin之和。

二、IE BUG特別是IE6和IE7造成錯(cuò)位   

這個(gè)問題是最常見的問題，我們檢查完第一點(diǎn)寬度問題，而寬度沒問題，這個(gè)時(shí)候在IE6、IE7中錯(cuò)位，在IE8及其它瀏覽器沒有錯(cuò)位問題，這個(gè)時(shí)候我們就要考慮到你是否使用了margin屬性，通常我們使用了CSS浮動(dòng)（css float）情況下使用margin（margin-right margin-left這里特別是這個(gè)屬性）此屬性會(huì)產(chǎn)生雙倍數(shù)值，這個(gè)時(shí)候我們需要使用css hack解決此問題。讓IE6或IE7單獨(dú)識(shí)別特指定margin樣式。

如：
1、IE6單獨(dú)識(shí)別（margin-left對于只有IE6錯(cuò)位情況下）
{margin-left:5px;_margin-left:2px}
這個(gè)時(shí)候除IE6外其它瀏覽器設(shè)別margin-left:5px，IE6單獨(dú)識(shí)別_margin-left:2px

2、IE7與IE6都識(shí)別（margin-left對于ie6和ie7識(shí)別其它版本和品牌瀏覽器不設(shè)別）
{margin-left:5px;*margin-left:2px;}
這個(gè)時(shí)候除IE6和IE7外，其它瀏覽器設(shè)別margin-left:5px，IE6和IE7識(shí)別*margin-left:2px

到此，相信大家對“DIV+CSS網(wǎng)頁錯(cuò)位的原因及怎么解決”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前標(biāo)題：DIV+CSS網(wǎng)頁錯(cuò)位的原因及怎么解決
網(wǎng)頁網(wǎng)址：http://m.rwnh.cn/article24/gspice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、企業(yè)網(wǎng)站制作、企業(yè)建站、微信公眾號(hào)、全網(wǎng)營銷推廣、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(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)