首先說明一點：
頁面錯位不等於瀏覽器bug，bug是指設定了正確的css，瀏覽器卻不以預期的樣式呈現。
比如設定了某個元素：margin-left: 10px; 但是在瀏覽器中，
這個 div 元素實際呈現的卻是：margin-left: 20px;
——在這種情況下才有可能是瀏覽器bug。
以下是一些常見的瀏覽器bug：
1.上下 margin 疊加bug
現在有二個元素： div1 和 div2，div1 的下面有 10px 的外邊距，div2 的上面有 10px 的外邊距，
樣式如下：
#div1
#div2
結構如下：
div1
div2
我們原本期望這二個 div 之間距離是20px，然而效果卻是這樣：
也就是說：這二個 div 之間，有 10px 的空間被疊加在一起。
假如把 div1 的 margin-bottom 增加到 15px，那麼它們之間的距離就成了 15px，
仍然有 10px 的空間被疊加起來。
*解決方法：給這二個 div 多加二個樣式：float: left; clear: left;
最終樣式：
#div1
#div2
最終效果圖：
2. ie6 浮動 margin 雙邊距bug
設定乙個父級元素 box 和乙個子級元素 childbox，
子級元素設定左浮動，並且還設定左邊距 10px ：
樣式如下：
#box
#childbox
結構如下：
childbox
這樣設定以後，在 firefox、ie7、ie8 下都正常顯示，可是在 ie6 下，顯示成這樣：
我們明明只給了左邊距為10px！！——如果把 10px 改成20px的話，ie6 下就會變成40px！！由此可見，在這種情況下，ie6 對 margin-left 的解釋就是在原來的值上多加了一倍！！
*解決方法：給子級元素 childbox 新增一行樣式：display: inline;
最終樣式：
#box
#childbox
最終效果圖：
3. li 下 的bug
當 li 裡包含了任何設定浮動的元素以後，此bug就會在 ie6、ie7 下出現：
樣式如下：
ul,p
li /* 清除瀏覽器預設樣式 */
ul li
p 結構如下：
在 ie6、ie7 裡莫明奇妙多出來了幾個象素：
注意：我並沒有給 li 設定margin-bottom的樣式。
*解決方法：給 li 多新增一行樣式：float: left;並且要保證 li 擁有足夠的寬，別讓第二行的 li 真的浮動上來！
最終樣式：
ul,p
li /* 清除瀏覽器預設樣式 */
ul li
p4. ie6 絕對定位下的 1 象素bug
絕對定位真是個好樣式，在眾多樣式之中它最可愛^_^，你希望它跑到哪去，它就跑到**，可惜，這樣的乖孩子，也禁不住 ie6 的折磨！！
我們先把父級元素的寬設定成任何奇數，例如：350px，讓子級元素浮動到父級右側：
樣式如下：
#box
#childbox
結構如下：
結果，討厭的 1px 出現了：
注意看右側，那雖然細微、但仍然很刺眼的 1pxbug！！！
如果把位置調到右下角，結果下面和右邊都出現了這1px 的bug！！
這個細小的bug雖然不起眼，但如果我們用絕對定位來處理圓角效果的話，那就讓人鬱悶了～···
*解決方法：最好把父級的寬設定成偶數！否則，就只能用 css hack **了！
常見瀏覽器相容性bug
1 ie6有向左浮動且有向左外邊距或文字向右浮動且有向右外邊距是會出現雙倍外邊距的bug 在 ie5.0 ie5.5 ie6 中，當為乙個塊級元素同時設定了向左浮動 float left 及左邊距或右邊距 margin left margin right 後，則該元素的左邊距或右邊距在某些情況下會是...
常見瀏覽器 瀏覽器核心
常見瀏覽器介紹 瀏覽器是網頁執行的平台，常用的瀏覽器有ie 火狐 firefox 谷歌 chrome safari和opera等。我們平時稱為五大瀏覽器。瀏覽器核心 理解 瀏覽器核心又可以分成兩部分 渲染引擎 layout engineer 或者 rendering engine 和 js 引擎。渲...
常見瀏覽器核心
二 gecko核心代表作品mozilla firefoxgecko是一套開放源 的 以c 編寫的網頁排版引擎。gecko是最流行的排版引擎之一，僅次於trident。使用它的最著名瀏覽器有firefox netscape6至9。三 webkit核心代表作品safari chromewebkit 是乙...