Div+css瀏覽器兼容問題小結(不是很全)
不管新手老手做頁面的時候都會遇到這樣那樣的問題,每個瀏覽器顯示的都不一樣,也就是我們所說的不兼容,主要是因為各瀏覽器的內核不同定義不一樣導致的。
有的時候我們會用駭客技術來做兼容,或者是根據各個瀏覽器進行不同的定義。下面我來說幾條:
Ps:主要是IE下的BUG比較多(可惡的IE)
IE6下面的雙倍BUG
例如三個塊要排列到一行上面,我們肯定要用float屬性了,貼在一塊兒也不好看,那么加個margin值吧,結果預覽的時候就出現(xiàn)問題了,IE6明顯間距比別的瀏覽器寬了,實際上IE6的margin效果是雙倍的,即:如果margin:10px;那么IE6就是20px,解決的辦法就是給讀懂的塊兒定義display:inline屬性。問題就解決了。
各瀏覽器文字本身大小
同樣是12號宋體,但是在不同的瀏覽器中鎖占的空間是不一樣的,不知道大家有沒有注意過。解決方案就是給文字設定line-height屬性。
圖片間隙
(又是IE6下的產物)一張圖片下面一段文字,做完你會發(fā)現(xiàn)IE6下面怎么多出1px,解決方案就是把圖片轉塊兒。
多余字符
(還是IE~~~)
寫備注是一個好習慣,方便查看和修改,不容易搞亂位置,但是有沒有遇到過這樣的情況,某一段文字或是一個容器后面突然出現(xiàn)一段或是幾個文字,咦,怎么回事?我明明沒有寫這些..而且只有IE6有,解決方法去掉注釋。
默認高度
(同上)
Ie6中有一個默認高度,如果你要寫一個長100,高5PX的盒子,那么IE6肯定就不是這個高度了,解決辦法font-size:0;overflow:hidden;height:5px。
吞吃
現(xiàn)在我們有上下兩個div,上面的div設置了背景,但是卻發(fā)現(xiàn)下面沒有設置背景的div 也有了背景,對應上面的背景吞吃現(xiàn)象,還有滾動下邊框缺失的現(xiàn)象。解決方案:使用zoom:1。