DIV+CSS網頁錯位緣由解決方法

經常咱們會遇到咱們要設置在一行顯示的佈局，卻由於種種緣由形成了錯位，看到結果是在一行的最後一個盒子佈局錯位掉下去了（以下圖）。

形成DIV CSS網頁佈局錯位的緣由大概有兩種狀況，一種是寬度計算錯誤，一種是IE BUG形成，特別是IE6和IE7。接下來咱們挨着爲你們介紹錯位與解決錯位方法。

1、寬度計算錯誤解決方法    - 

寬度計算錯誤，假如總寬度爲500px，有3個盒子，分別css寬度爲200px、200px、100px，這個沒問題會在一排顯示不會錯位，但若是加入了css邊框、padding、margin屬性時，別忘記這幾個屬性所佔的寬度。特別是padding與邊框border佔用寬度空間不要忽略了。若是有一個盒子加入左右邊框，這個時候有一個盒子中剛合適的寬度條件下減小2px邊框佔用寬度，不然即會總3個盒子合計寬度大於了總寬度，形成錯位。

2、IE BUG特別是IE6和IE7形成錯位    -   

這個問題是最多見的問題，咱們檢查完第一點寬度問題，而寬度沒問題，這個時候在IE六、IE7中錯位，在IE8及其它瀏覽器沒有錯位問題，這個時候咱們就要考慮到你是否使用了margin屬性，一般咱們使用了CSS浮動（css float）狀況下使用margin（margin-right margin-left這裏特別是這個屬性）此屬性會產生雙倍數值，這個時候咱們須要使用css hack解決此問題。讓IE6或IE7單獨識別特指定margin樣式。

如：
一、IE6單獨識別（margin-left對於只有IE6錯位狀況下）
{margin-left:5px;_margin-left:2px}
這個時候除IE6外其它瀏覽器設別margin-left:5px，IE6單獨識別_margin-left:2px

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

更多CSS HACK知識你們可進入CSS HACK欄目瞭解更多相關知識。

覺得爲你們總結了常見網頁錯位緣由，你們從這以上兩方面入手檢查CSS佈局網頁錯位緣由。