DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> IE6 IE7 IE8三大浏覽器的CSS兼容速查表(1)
IE6 IE7 IE8三大浏覽器的CSS兼容速查表(1)
編輯:CSS詳解     

IE每個新版本的推出,就不可避免地在IE的各個主要版本之間產生兼容問題,盡管IE8推出已有時日,使用IE6的用戶仍然相當可觀。本文以速查手冊的形式介紹CSS(2.1和3)在IE6,IE7,IE8三個版本之間的兼容情況。

IE6,IE7,IE8 CSS兼容速查表

現代Web設計與開發越來越看重浏覽器兼容問題,IE每個新版本的推出,都在CSS的標准化方面前進一大步,同時,也就不可避免地在IE的各個主要版本之間產生兼容問題,盡管IE8推出已有時日,使用IE6的用戶仍然相當可觀。本文以速查手冊的形式介紹CSS(2.1和3)在IE6,IE7,IE8三個版本之間的兼容情況。

1.居中問題

div裡的內容,IE默認為居中,而Firefox默認為左對齊
可以嘗試增加代碼margin:auto

2.高度問題

兩上下排列或嵌套的div,上面的div設置高度(height),如果div裡的實際內容大於所設高度,在Firefox中會出現兩個div重疊的現象;但在IE中,下面的div會自動給上面的div讓出空間
所以為避免出現層的重疊,高度一定要控制恰當,或者干脆不寫高度,讓他自動調節,比較好的方法是height:100%;
但當這個div裡面一級的元素都float了的時候,則需要在div塊的最後,閉和前加一個沉底的空div,對應CSS是:
.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3.clear:both

不想受到float浮動的,就在div中寫入clear:both;

4.IE浮動margin產生的雙倍距離

  1. #box{
  2. float:left;
  3. width:100px;
  4. margin:000100px;//這種情況之下IE會產生200px的距離
  5. display:inline;//使浮動忽略
  6. }

5.padding問題

Firefox設置padding後,div會增加height和width,但IE不會(*標准的XHtml1.0定義dtd好像一致了)
高度控制恰當,或嘗試使用height:100%;
寬度減少使用padding
但根據實際經驗,一般Firefox和IE的padding不會有太大區別,div的實際寬=width+padding,所以div寫全width和padding,width用實際想要的寬減去padding定義

6.div嵌套時y軸上padding和marign的問題

Firefox裡y軸上子div到父div的距離為父padding+子marign
IE裡y軸上子div到父div的距離為父padding和子marign裡大的一個
Firefox裡y軸上父padding=0且border=0時,子div到父div的距離為0,子marign作用到父div外面

7.padding,marign,height,width的傻瓜式解決技巧

注意是技巧,不是方法:
寫好標准頭

  1. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  2. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">

高盡量用padding,慎用margin,height盡量補上100%,父級height有定值子級height不用100%,子級全為浮動時底部補個空clear:both的div
寬盡量用margin,慎用padding,width算准實際要的減去padding。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved