IE與Firefox的CSS相容概括 )

關鍵字: css相容

DOCTYPE 影響 CSS 處理

FireFox: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行

FireFox: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可置中

FireFox: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width

FireFox: 支援 !important, IE 則忽略, 可用 !important 為 FireFox 特別設定樣式

div 的垂直置中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直置中了。缺點是要控制內容不要換行

cursor: pointer 可以同時在 IE FireFox 中顯示遊標手指狀， hand 僅 IE 可以

FireFox: 連結加邊框和背景色，需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格

XHTML+CSS相容性解決方案小集
使用XHTML＋CSS構架好處不少，但也確實存在一些問題，不論是因為使用不熟練還是思路不清晰，我就先把一些我遇到的問題寫在下面:

1.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方案：

div{margin:30px!important;margin:28px;} 注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：

div{maring:30px;margin:28px} 重複定義的話按照最後一個來執行，所以不可以唯寫margin:XXpx!important;

2.IE5 和IE6的BOX解釋不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

3.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義

ul{margin:0;padding:0;}就能解決大部分問題

4.關於指令碼，在xhtml1.1中不支援language屬性，只需要把代碼改為

建議：在網頁設計時檢驗您的網頁CSS對瀏覽器的相容性，這樣可以有效避免由於瀏覽器不相容而引起的版面錯亂問題

CSS hack:
區別IE6 與FF ：
background: orange ;*background: blue ;

區別[color=BlueIE6[/color]與IE7 ：
background: green !important;background: blue ;

區別IE7 與FF ：
background: orange ; *background: green ;

區別FF ，IE7 ，IE6 ：

background: orange ;

* background: green !important ;

* background: blue ;

註：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;

　　　　Internet Explorer 6 　　Internet Explorer 7 　　Firefox
* 　　　　　　　　√ 　　　　　　　　　　√ 　　　　　　　　×
!important　　　　× 　　　　　　　　　　√ 　　　　　　　　　　√

另外再補充一個，底線"_ ",
IE6支援底線，IE7和firefox均不支援底線。(推薦)

於是大家還可以這樣來區分：firefox ，IE7 ，IE6
: background: orange ;*background: green ;_background: blue ;

註：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

讓Div在IE和Firefox下自適應高度

<div style="height:100%; overflow:auto;"> 自適應高度</div>

呵呵，然後發現一個很奇怪的現象，就是如果只添加"height:100%; "(設定高度100%)就IE下可以自適應高度而FireFox不行，如果只添加"overflow:auto; "(設定溢出自動)就FireFox下可以自適應高度而IE不行，所以完美的解決辦法就是"height:100%; overflow:auto;"兩個屬性同時添加進去就可以了...

圖片與容器下邊界有空隙的解決方案

比較有效三種方法：

第一，給圖片img標籤display:block。

img{display:block}

第二，定義容器裡的字型大小為0。

div {
width:110px;
border:1px solid #000000;
font-size:0;
}

第三，定義圖片img標籤vertical-align:bottom，vertical-align:middle，vertical-align:top

img{vertical-align:bottom}

造成圖片在IE下與容器下邊界有空隙的原因

圖片文字等inline元素預設是和父級元素的baseline對齊的，而baseline又和父級底邊有一定距離（這個距離和 font-size，font-family 相關，不一定是 5px），所以設定 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li，其他的block元素中包含img也會有這個現象。

至於這裡的HTML 屬性align="center"（對於圖片瀏覽器會處理成align="middle"），就相當於vertical-align:middle; 所以道理也是一樣的，只要vertical-align不取baseline，這個空隙就消失了。

表單輸入框與圖片不能對齊的解決辦法

vertical-align: middle;

在表單輸入框和圖片的樣式定義中設定 vertical-align: middle; 可解決該問題

Flash 與 div 層次(z-index)

<param name="WMODE" value="transparent">

<param name="wmode" value="Opaque">

<param name="wmode" value="Window">

NOTE: 支援其它瀏覽器(firefox opera etc.) 則使用 <embed wmode="transparent" />在embed節點中加入wmode值.

window 模式

預設情況下的顯示模式，在這種模式下flash player有自己的視窗控制代碼，這就意味著flash影片是存在於Windows中的一個顯示執行個體，並且是在瀏覽器核心顯示視窗之上的，所以flash只 是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面，這就導致預設顯示方式下flash總是會遮 住位置與他重合的所有DHTML層。

但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上，但當flash影片播放時會出現比較詭異的現象，比如DHTML層像被flash刮掉一塊一樣顯示異常。

Opaque 模式

這是一種無視窗模式，在這種情況下flash player沒有自己的視窗控制代碼，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可 以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。

Transparent 模式
透明模式，在這種模式下flash player會將stage的背景色

alpha值將為0並且只會繪製stage上真實可見的對象，同樣你也可以使用z-index來控制flash影片的 深度值，但是與Opaque模式不同的是這樣做會降低flash影片的回放效果，而且在9.0.115之前的flash player版本設定wmode=”opaque”或”transparent”會導致全螢幕模式失效。

瞭解了各種模式的實現方式和意義在以後的開發中就可以按照具體情況選擇設定wmode屬性的值了。