網(wǎng)站運營指導

瀏覽器兼容一直是CSS布局中常見的到的問題，初學者也因此走入很多誤區(qū)，那么通過我的經(jīng)驗，總結了2個方法，既可以避免大部分瀏覽器兼容問題。 這2個方法具有以下幾個優(yōu)點： 1. 無需使用HACK 2. 簡單有效，一看即會 3. 層次化、模塊化布局 4. 代碼更合理，更易于識別 方法一：解決加內(nèi)外間距造成浮動錯位 我們通常在多欄布局的時候需要使用float 進行DIV的浮動，通常我們會寫3個DIV來進行3欄布局，我們希望達到如下效果： 為了達到這種效果，我們會加上margin 讓欄目直接由間距，另外還要加上邊框，再加上padding讓里面的文字不會緊貼邊框。但是意外的情況發(fā)生了，代碼寫好了，居然出現(xiàn)下面的情況： 第三欄，跑到了下面。 這個并不是你想要的效果。那么我們來分析一下吧。按照一般的思路。整體寬度為800px，，左欄200，中間400，右欄200，這樣看起來很好，但是這幾個欄目中間要有間距，所以你要改一下：左欄190，中間400，右欄190這樣是不是就OK了呢。 但是為了好看，你加上了邊框。但卻忘記了邊框也會增加寬度，另外你增加了欄目的padding:10px; 我暈，那么這樣的實際寬度就成了：左欄：寬度200-外間距10-內(nèi)間距20-邊框2=168，這樣才不會錯位。但是這樣你不覺得有點復雜么，或許你需要配一個計算器。