HTML的頁(yè)面錯(cuò)位原因以及處理方法

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

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

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

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

寬度問(wèn)題造成CSS布局錯(cuò)位小結(jié)：

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

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

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

如：

1、IE6單獨(dú)識(shí)別（margin-left對(duì)于只有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對(duì)于ie6和ie7識(shí)別其它版本和品牌瀏覽器不設(shè)別）

{margin-left:5px;*margin-left:2px;}

這個(gè)時(shí)候除IE6和IE7外，其它瀏覽器設(shè)別margin-left:5px，IE6和IE7識(shí)別*margin-left:2px

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML如何2d和3d轉(zhuǎn)換

html與xhtml的區(qū)別詳解

Js獲取獲取樣式的常見方式

以上就是HTML的網(wǎng)頁(yè)錯(cuò)位原因以及解決方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！