網頁有時候錯位,刷新后就正常問題之分析

2024-07-11 09:00:45

字體：大中小

來源：轉載

供稿：網友

如果你的網站某個頁面有時候打開錯位，但是再次刷新有可以正常顯示，這種情況大部分是div+css做的網站，也是現在比較流行的。以前table結構的網頁基本不會出現這種情況。

從網站代碼分析：錯位？什么情況下能導致錯位呢？

下面是常見的幾種錯誤原因：

--------------------------------------------------------------------------------

1. 內部容器寬度設置超出了外部容器寬度；

2. 內部多個并列容器寬度相加超出了外部容器寬度；

3. 外部容器設置了固定width，內部容器固定width、margin、padding相加等于外部容器寬度，但是忘記了把border邊框加在里面；

4.CSS加載失敗，有可能不在同一個服務器造成。

--------------------------------------------------------------------------------

我們經常最容易犯的錯誤就是第3種情況，在一個大的容器中有兩個左右布局的小容器，小容器中防止內容，為了達到美觀，我們需要加細邊框以區別左右版塊。為了觀察舒服，我們需要設置文字要原理邊框，因此設置了padding，為了讓兩個容器直接有空隙，我們又用到了外邊框距margin，在過程中。我們有時候錯誤將border:#CCC solid 1px; 這樣的邊框寬度計算為1px，沒有想到左右都會出現1。因此，如果網頁出現錯誤情況，我們應該重新計算分析容器真正的占用寬度。

--------------------------------------------------------------------------------

2014年11月18日發現新的導致錯位問題：

如何將樣式表

<style type="text/css">
……
……
……
</style>

文件直接放到<body>和</body>中間的不當之處就會產生刷新后時不時的出現錯誤情況。

解決方法就是將樣式表統一放到</head>上面，或者放專門的樣式表外文件。