HTML的網頁錯位原因以及解決方法

我們常常會遇到需要設定同一行的佈局，但是卻因為種種原因錯了位，我總結了一下網頁佈局錯位大概有倆種原因，今天給大家好好分析一下原因以及解決方法。

通常我們會遇到我們要設定在一行顯示的佈局，卻因為種種原因造成了錯位，看到結果是在一行的最後一個盒子佈局錯位掉下去了

造成DIV CSS網頁版面錯位的原因大概有兩種情況，一種是寬度計算錯誤，一種是IE BUG造成，特別是IE6和IE7。接下來我們就挨著為大家介紹錯位與解決錯位方法。

寬度計算錯誤解決方法 

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

寬度問題造成CSS佈局錯位小結：

內盒子寬度總和大於了外寬度造成錯位，檢查時候我們一定計算設定寬度、邊框、paddind、margin總和。

IE BUG特別是IE6和IE7造成錯位

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

如：

1、IE6單獨辨識（margin-left對於只有IE6錯置）

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

這時候除IE6外其它瀏覽器設別margin-left:5px，IE6單獨識別_margin-left:2px

2、IE7與IE6都識別（margin-left對於ie6和ie7識別其它版本和品牌瀏覽器不設別）

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

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

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

HTML如何2d與3d轉換

#html與xhtml的差異詳解

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

以上是HTML的網頁錯位原因以及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！