Firefox IE對CSS的相容性整理

2021-08-29 17:32:04 字數 1737 閱讀 2671

1、firefox和ie對某些css樣式的認定有不少區別,包括:

ul和ol的預設padding值是不一樣的,在firefox中,padding-left預設值為40px左右,而ie中為0,一般設定ul就能解決大部分問題。

並列排列的多個元素(或者鏈結)的**中的空格和回車會造成元素之間的間隙,而在firefox中和ie中顯示是不一樣的,ie顯示空格(約8px)、firefox顯示空格(約4px)。

對不規範**的相容情況不同,ie中漏掉的關閉符號對顯示不造成影響,而firefox中就會形成錯亂的布局。

firefox對於寬高尺寸的嚴格解析會造成與設定不匹配(超出)的或**將原設定div撐大。

未定義id的div,在ie中會與div屬性中的其他設定有關,而在firefox中的位置會於div在檔案中位置有關,緊隨前乙個div出現。

設定為float的div在ie下設定的margin會加倍的,特別是margin-left,這是ie6的乙個bug。解決的方法是在這個div裡面加上display:inline;

如果是動態地新增內容,高度最好不要定義。瀏覽器可以自動伸縮,然而如果是靜態的內容,高度最好定好。(似乎有時候不會自動往下撐開,不知道具體怎麼回事)

ff: div 設定 margin-left, margin-right 為 auto 時已經居中, ie 不行。ie裡設定text-align:center,就居中了,但在ff中不行。所以一般兩個都要設定。

ff: 設定 padding 後, div 會增加 height 和 width, 但 ie 不會, 故需要用 !important 多設乙個height 和 width

ff對於"!important"會自動優先解析,然而ie則會忽略.如下

.tabd

ff: 鏈結加邊框和背景色,需設定 display: block, 同時設定 float: left 保證不換行。

2、針對firefox ie6 ie7的css樣式

現在大部分都是用!important來hack,對於ie6和firefox測試可以正常顯示,

但是ie7對!important可以正確解釋,會導致頁面沒按要求顯示!找到乙個針

對ie7不錯的hack方式就是使用「*+html」,現在用ie7瀏覽一下,應該沒有問題了。

現在寫乙個css可以這樣:

#1 /* moz */

* html #1 /* ie6 */

*+html #1 /* ie7 */

那麼在firefox下字型顏色顯示為#333,ie6下字型顏色顯示為#666,ie7下字型顏色顯示為#999。

3、firefox下多層巢狀時內層設定了浮動外層設定背景時背景不顯示

這主要是內層設定浮動後外層高度在firefox下變為0,所以應該在外層與內層間再嵌一層,設定浮動和寬

度,然後給這個層設定背景(聽說還有其他方法,感覺還是這方法好使)

4、屬性選擇器(這個不能算是相容,是隱藏css的乙個bug

p[id]{}div[id]{}

這個對於ie6.0和ie6.0以下的版本都隱藏,ff和opera作用

屬性選擇器和子選擇器還是有區別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的.

5、巢狀div:父div的高度不能根據子div自動變化的解決方案

當content內容多時,即使parent設定了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展。 解決方案

在層的最下方產生乙個高度為1的空格,可解除這個問題

調css支援firefox IE6 IE7的方法

例子 bg html bg 在調css的支援順序 firefox ie6 ie7 1.先支援firefox 在firefox中帶 important 屬性是是最高的優先順序 ie6 ie7 不能識別 所以在上面的 片段中firefox識別後的width引數因該是width 100 2.ie支援 2....

CSS中 important的作用 瀏覽器相容性

對於ie系列瀏覽器都能夠識別,firefox 瀏覽器則不能識別 important只有ie7.0和firefox可以識別,但是ie6.0不能成功應用.在 1 中,之所以把 放在後面是因為ff不識別 而導致只對它設定了一次border 而ie 系列進行了兩次border設定後,後乙個屬性覆蓋了前乙個屬...

firefox IE下的幾個不同屬性的方法呼叫

宣告 document.all 該物件只有ie中才存在,故用該物件來判斷瀏覽器的型別 一 iframe的物件 在ie下可通過document.frames id 得到該iframe物件,而在火狐下則是通過document.getelementbyid content panel if content...