最全的CSS瀏覽器兼容問題整理(IE6.0、IE7.0與FireFox)

1、最全的css瀏覽器兼容問題整理（IE6.0、IE7.0與FireFox)css對瀏覽器的兼容性有時讓人很頭疼，或許當你了解當中的技巧跟原理，就會覺得也不是難事，從網(wǎng)上收集了 IE7,6與Fireofx的兼容性處理方法并整理了下對于web2.0的過度，請盡量用xhtml格式寫代碼，而且DOCTYPE影響CSS 處理，作為W3C的標準，一定要加DOCTYPE聲明.CSS技巧1.div的垂直居中問題vertical-align:middle;將行距增加到和整個 DIV 一樣高 line-height:200px;然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行2. margin 加倍的問題設(shè)置為

2、float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:iniine;例如:<#div id= ” imfloat相應的css為3 / 11#IamFloatfloat:left;margin:5px;/*IE 下理解為 10px*/display:inline;/*IE 下再理解為 5px*/3. 浮動 ie 產(chǎn)生的雙倍距離#box float:left; width:100px; margin:0 0 0 100px; /這種情況之下 IE 會產(chǎn)生200px 的距離 display:inline; / 使浮動忽略

3、 這里細說一下 block 與 inline 兩個元素： block 元素的特點是 ,總是在新行上開始,高度,寬度,行高,邊距都可以控制 （塊元素 ）;Inline 元素的特點是 ,和其他元素在同一行上 ,不可控制 （ 內(nèi)嵌元素 ）;#box display:block; / 可以為內(nèi)嵌元素模擬為塊元素 display:inline; /實現(xiàn)同一行排列的效果 diplay:table;4 IE 與寬度和高度的問題IE 不認得 min- 這個定義，但實際上它把正常的 width 和 height 當作有min 的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只

4、用 min-width 和 min-height 的話， IE 下面根本等于沒有設(shè)置寬度和高度。比如要設(shè)置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：#box width: 80px; height: 35px;html>body #box width: auto; height: auto; min-width: 80px; min-height: 35px;5.頁面的最小寬度 min -width 是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬 度，這樣就能保證排版一直正確。 但 IE 不認得這個， 而它實際上把 width 當 做 最小寬度來使。為了讓這

5、一命令在 IE 上也能用，可以把一個 <div> 放到vbody> 標簽下，然后為div指定一個類,然后CSS這樣設(shè)計:#container min-width: 600px;width:expression(document.body.clientWidth < 600? "600px": "auto" );第一個min-width是正常的；但第2行的width 使用了 Javascript ,這只有IE 才認得，這也會讓你的 HTML 文檔不太正規(guī)。 它實際上通 過 Javascript 的判斷 來實現(xiàn)最小寬度。6.DIV 浮

6、動 IE 文本產(chǎn)生 3 象素的 bug左邊對象浮動， 右邊采用外補丁的左邊距來定位， 右邊對象內(nèi)的文本會離左邊有3px 的間距 .#box float:left; width:800px;#right width:50%;這句是關(guān)鍵*html #left margin-right:-3px; / <div id="box"> <div id="left"></div> <div id="right"></div> </div>7.IE 捉迷藏的問題當 div 應用

7、復雜的時候每個欄中又有一些鏈接， DIV 等這個時候容易發(fā)生捉迷藏 的問題。有些內(nèi)容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。 解決辦法： 對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡 量簡單。8.float 的 div 閉合;清除浮動;自適應高度 ; 例如： v#div id= ” floatA ” ><#div id= ” floatB ” ><#div id= ”NOTfloatC ” >這里的OTfloatC 并不希望繼續(xù)平移，而是希望往下排。（其中floatA 、floatB 的屬性已經(jīng)設(shè)置為

8、float:left這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽,” clear ” d這一定要注class= ” NOTfloatC ” >之間力<#div class=必須將 float 標簽閉合。在 <#div class=” floatB ” > <#div5 / 11意位置，而且必須與兩個具有 float 屬性的 div 同級，之間不能存在嵌套關(guān)系， 否則會 產(chǎn)生異常。 并且將 clear 這種樣式定義為為如下即 可： .clear clear:both; 作為外部 wrapper 的 div 不要定死高度 ,為了讓

9、高度能自動適應，要在 wrapper 里面加上 overflow:hidden; 當包含 float 的 box 的時候，高度自動 適應在 IE 下無效，這時候應該觸發(fā) IE 的 layout 私有屬性 （萬惡的 IE ?。。┯脄oom:1; 可以做到，這樣就達到了兼容。例如某一個 wrapper 如下定義：.colwrapper overflow:hidden; zoom:1; margin:5px auto; 對于排版 ,我們用得最多的 css 描述可能就是 float:left. 有的時候我們需要在 n欄的 float div后面做一個統(tǒng)一的背景 ,譬如 :<div id=page

10、 ” ><div id=left ” ></div><div id=center” ></div><div id=right” ></div>置成 float, 所以我們應該這樣解決6 / 11</div>比 如我們要將 page的背景設(shè)置成藍色 ,以達到所有三欄的背景顏色是藍色的目的 ,但是我們會發(fā)現(xiàn)隨著 left center right 的向下拉長 ,而 page 居然保存高度不 變 ,問題來了 ,原因在于 page 不是 float 屬性 ,而我們的 page 由于要居中 ,不能設(shè)<div

11、id=” page ” ><div id=” bg ” style= ”<div id=” left ” ></div><div id=” center ” ></div><div id=” right ” ></div></div>float:left;width:100%”></div>再嵌入一個float left而寬度是 100% 的 DIV 解決之 萬能 float 閉合（非常重要 !）關(guān) 于 clear float的原理可參見 How To Clear Floats W

12、ithout StructuralMarkup, 將以下代碼加入 Global CSS 中,給需要閉合的 div 加上class="clearfix"即可,屢試不爽.12 / 11/* Clear Fix */ .clearfix:after content:"." display:block; height:0; clear:both;visibility:hidden; .clearfix display:inline-block; /* Hide from IE Mac */ .clearfix display:block; /* End hide

13、 from IE Mac */ /* end of clearfix */或者這樣設(shè)置： .hackbox display:table; / 將對象作為塊元素級的表格顯示 11. 高度不適應高度不適應是當內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié)， 特別是 當內(nèi)層對象使用 margin 或 paddign 時。例：#box background-color ：#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; <div id="box"> <p>p 對象中的

14、內(nèi)容 </p> </div>解決方法：在 P 對象上下各加 2 個空的 div 對象 CSS 代碼： .1height:0px;overflow:hidden;或者為 DIV 加上 border 屬性。12 .IE6 下為什么圖片下有空隙產(chǎn)生解 決這個 BUG 的方法也有很多 ,可以是改變 html 的排版 ,或者設(shè)置 img 為display:block 或者設(shè)置 vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決 .13. 如何對齊文本與文本輸入框加上 vertical-

15、align:middle;<style type="text/css"> <!- input width:200px;height:30px;border:1px solid red;vertical-align:middle;-></style>14.web 標準中定義 id 與 class有什么區(qū)別嗎.web 標準中是不容許重復 ID的,比如 div id="aa" 不容許重復 2 次 ,而 class定義的是類 ,理論上可以無限重復, 這樣需要多次引用的定義便可以使用他 .二.屬性的優(yōu)先級問題ID 的優(yōu)先級要高于

16、 class, 看上面的例子三 .方便 JS 等客戶端腳本 ,如果在頁面中要對某個對象進行腳本操作 ,那么可以給他定義一個 ID, 否則只能利用遍歷頁面元素加上指定特定屬性來找到它 ,這是 相 對浪費時間資源 ,遠遠不如一個 ID 來得簡單 .15. LI 中內(nèi)容超過長度后以省略號顯示的方法此方法適用與IE與OP瀏覽器<style type="text/css"> <!- li width:200px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:

17、hidden;-> </style>16. 為什么 web 標準中 IE 無法設(shè)置滾動條顏色了解決辦法是將 body 換成 html<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" c /> <style type="text/css">

18、<!- html ：#fff;scrollbar-face-color ：#f6f6f6;scrollbar-highlight-colorscrollbar-shadow-color：#eeeeee;scrollbar-3dlight-color：#eeeeee;scrollbar-arrow-color：#000;scrollbar-track-color：#fff;scrollbar-darkshadow-color ：#fff;-> </style>17. 為什么無法定義 1px 左右高度的容器IE6 下這個問題是因為默認的行高造成的 ,解決的方法也有很多 ,例如 :overflow:hidden | zoom:0.08 | line-height:1px18. 怎么樣才能讓層顯示在 FLASH 之上呢解決的辦法是給 FLASH 設(shè)置透明<param name=&