如果你的網(wǎng)站某個頁面有時候打開錯位,但是再次刷新有可以正常顯示,這種情況大部分是div+css做的網(wǎng)站,也是現(xiàn)在比較流行的。以前table結(jié)構(gòu)的網(wǎng)頁基本不會出現(xiàn)這種情況。
從網(wǎng)站代碼分析:錯位?什么情況下能導(dǎo)致錯位呢?
下面是常見的幾種錯誤原因:
--------------------------------------------------------------------------------
1. 內(nèi)部容器寬度設(shè)置超出了外部容器寬度;
2. 內(nèi)部多個并列容器寬度相加超出了外部容器寬度;
3. 外部容器設(shè)置了固定width,內(nèi)部容器固定width、margin、padding相加等于外部容器寬度,但是忘記了把border邊框加在里面;
4.css加載失敗,有可能不在同一個服務(wù)器造成。
--------------------------------------------------------------------------------
我們經(jīng)常最容易犯的錯誤就是第3種情況,在一個大的容器中有兩個左右布局的小容器,小容器中防止內(nèi)容,為了達(dá)到美觀,我們需要加細(xì)邊框以區(qū)別左右版塊。為了觀察舒服,我們需要設(shè)置文字要原理邊框,因此設(shè)置了padding,為了讓兩個容器直接有空隙,我們又用到了外邊框距margin,在過程中。我們有時候錯誤將border:#ccc solid 1px; 這樣的邊框?qū)挾扔嬎銥?px,沒有想到左右都會出現(xiàn)1。因此,如果網(wǎng)頁出現(xiàn)錯誤情況,我們應(yīng)該重新計算分析容器真正的占用寬度。
--------------------------------------------------------------------------------
2014年11月18日發(fā)現(xiàn)新的導(dǎo)致錯位問題:
如何將樣式表
<style type=text/css>
……
……
……
</style>
文件直接放到<body>和</body>中間的不當(dāng)之處就會產(chǎn)生刷新后時不時的出現(xiàn)錯誤情況。
解決方法就是將樣式表統(tǒng)一放到</head>上面,或者放專門的樣式表外文件。
更多信息請查看IT技術(shù)專欄