1. 程式人生 > >路漫漫其修遠也,吾將上下而求索

路漫漫其修遠也,吾將上下而求索

明天要去廣州面試了,學習了一下面試題,今天來個總結吧 祝我明天面試成功

IE瀏覽器和火狐瀏覽器相容問題——CSS篇

一、css+div 樣式 IE與FF相容問題彙總

IE和火狐的css相容性問題歸總   CSS對瀏覽器器的相容性具有很高的價值,通常情況下IE和火狐瀏覽器存在很大的解析差異,這裡介紹一下相容要點。 1、DOCTYPE 影響 CSS 處理

2、FF: div 設定 margin-left, margin-right 為 auto 時已經居中, IE 不行

3、FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

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

5、FF: 支援 !important, IE 則忽略, 可用 !important 為 FF 特別設定樣式,值得注意的是,一定要將xxxx !important 這句放置在另一句之上

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

7、cursor: pointer 可以同時在 IE FF 中顯示遊標手指狀, hand 僅 IE 可以

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

9、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法:div{margin:30px!important;margin:28px;} 注意這兩個margin的順序一定不能寫反,據阿捷的說法!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:

div{maring:30px;margin:28px}

重複定義的話按照最後一個來執行,所以不可以只寫

margin:XXpx!important; 

10、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} 關於這個/**/是什麼我也不太明白,只知道IE5和firefox都支援但IE6不支援,如果有人理解的話,請告訴我一聲,謝了!:)

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

ul{margin:0;padding:0;}

就能解決大部分問題   注意事項:      1、float的div一定要閉合。   例如:(其中floatA、floatB的屬性已經設定為float:left;)<#div id=\”floatA\” >

<#div id=\”floatB\” >
  <#div id=\”NOTfloatC\” >

這裡的NOTfloatC並不希望繼續平移,而是希望往下排。   這段程式碼在IE中毫無問題,問題出在FF。原因是NOTfloatC並非float標籤,必須將float標籤閉合。      在<#div class=\”floatB\”>   <#div class=\”NOTfloatC\”>   之間加上<#div class=\”clear\”>      這個div一定要注意宣告位置,一定要放在最恰當的地方,而且必須與兩個具有float屬性的div同級,之間不能存在巢狀關係,否則會產生異常。      並且將clear這種樣式定義為如下即可:.clear{clear:both;}      此外,為了讓高度能自動適應,要在wrapper裡面加上overflow:hidden;   當包含float的box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私有屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了相容。   例如某一個wrapper如下定義:

.colwrapper{
  overflow:hidden;
  zoom:1;
  margin:5px auto;}

2、margin加倍的問題。      設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。      解決方案是在這個div裡面加上display:inline;   例如:

<#div id=\”imfloat\”>
  相應的css為
  #IamFloat{
  float:left;
  margin:5px;/*IE下理解為10px*/
  display:inline;/*IE下再理解為5px*/}

3、關於容器的包涵關係      很多時候,尤其是容器內有平行佈局,例如兩、三個float的div時,寬度很容易出現問題。在IE中,外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取畫素級的精度。      4、關於高度的問題      如果是動態地新增內容,高度最好不要定義。瀏覽器可以自動伸縮,然而如果是靜態的內容,高度最好定好。(似乎有時候不會自動往下撐開,不知道具體怎麼回事)      5、最狠的手段 - !important;      如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於”!important”會自動優先解析,然而IE則會忽略.如下.

tabd1{
  background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
  background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

值得注意的是,一定要將xxxx !important 這句放置在另一句之上,上面已經提過;      IE7.0出來了,對CSS的支援又有新問題。瀏覽器多了,網頁相容性更差了,疲於奔命的還是我們 ,為解決IE7.0的相容問題,找來了下面這篇文章:      現在我大部分都是用!important來hack,對於ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁面沒按要求顯示!搜尋了一下,找到一個針對IE7不錯的hack方式就是使用 “*+html”,現在用IE7瀏覽一下,應該沒有問題了。      現在寫一個CSS可以這樣:

#example { color: #333; } /* Moz /   * html #example { color: #666; } / IE6 */   +html #example { color: #999; } / IE7 */

那麼在firefox下字型顏色顯示為#333,IE6下字型顏色顯示為#666,IE7下字型顏色顯示為#999,他們都互不干擾。    ---------------------------------------------------------------------------------------------------------------------------------   先溫習一下對於IE的box-model的破解      IE box-model這個臭名昭著的bug存在於IE6/Win以前的每一隻版本,這個蟲子直到tantak釋出了流傳最為廣泛的那個hack才開始被馴服      IE5.X/win對box-model的解析是一樣的,他們認為width包括了邊框(border)和補白(padding),幸運的是這個情況在IE6中有了好轉      但是IE6在向後相容的同時也包容了以前的錯誤,IE6其實有兩個核心,在舊的頁面前他仍舊錶現出對錯誤的寬容,只有在文件中嚴格地加上文件型別(DOCTYPE)宣告,IE6才能夠接受正確的box-model      所以,tantak的hack必須和正確的DOCTYPE同時包含在文件中才能夠正常工作

Quote
  div.content {
  width:400px; //這個是錯誤的width,所有瀏覽器都讀到了
  voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""後的內容
  voice-family:inherit;
  width:300px; //包括IE6/win在內的部分瀏覽器讀到這句,新的數值(300px)覆蓋掉了舊的
  }
  html>body .content { //html>body是CSS2的寫法
  width:300px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句
  }

現在回到主題,我們經常看到!important和(空格)/**/:組合在一起使用,這個寫法有什麼奧妙呢?      看剛才那個寫法,我這裡可以提供另一種寫法也能達到這樣的效果

Quote
  div.content {
  width:300px !important; //這個是正確的width,大部分支援!important標記的瀏覽器使用這裡的數值
  width(空格)/**/:400px; //IE6/win不解析這句,所以IE6/win仍然認為width的值是300px;而IE5.X/win讀到這句,新的數值(400px)覆蓋掉了舊的,因為!important標記對他們不起作用
  }
  html>body .content { //html>body是CSS2的寫法
  width:300px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句
  }

同樣,這個方法仍必須依靠正確的文件型別宣告才能夠正常工作,原因在前面已經說過。   文件型別宣告就像一個開關,打開向後相容的未來,而錯誤使用的話,就是一個Pandora box   ---------------------------------------------------------------------------------------------------------------   ie7.0的面世,尚且不論他是否較之ie6.0進步, ie7和ie6 之間不相容,毫無疑問又引入了新的痛處,至少在除錯的過程中,又多了一道程式以及隨之而來的大量不相容。      目前,使用ie7.0的使用者尚且是少數,使用ie6.0的使用者仍然佔據很大的比重。然而,大量通過ie6 測試的網頁,在ie7.0中都顯示不正常。   據ie7.0官方解說:      ie7.0在IE6的基礎上引入了strict模式,包含了許多有關於層疊樣式表(CSS)解析與呈現的改進。這些改進意在提高Internet Explorer解釋層疊樣式表的一致性,以達到W3C的推薦的標準,同時為開發者提供一個可以依賴的功能集合。      不管官方的語言是多麼動聽,也不管ie7.0是不是真的W3C了,瀏覽器之間太多個性化的東西,太多差異,讓我們無可奈何。在ie7.0下設計出的網頁,ie6下面顯示的幾乎是不堪入目。那麼,我們在設計網頁的時候,在解決好ie6.0與火狐的相容問題的同時,我們是更多的服從符合W3C一些的 ie7.0,還是對96%的ie6.0妥協?這個問題其實有些多餘,我們能做的,或許只有選擇中庸,只有儘量除錯到各個瀏覽器都顯示正常吧。      ie7.0與ie6.0的之間不相容,目前就我知道的有如下幾個方面,如有遺漏或者說錯了的地方,歡迎在後面補充或者糾正。      1. ie7,ie6 div+css出現寬度定義不同      在寬度定義上出現寬度的解釋不同,IE7寬度在IE6上要寬一些,正是這個原因網頁可能會出現溢位問題, 還好這個問題可以通過更改數值或者修改一下百分比解決.      2. ie7.0修復了!important這個bug。      先前由於ie6.0對!important識別存在bug, 在firefox和IE中的BOX模型解釋不一致導致相差2px,大部分網頁標準設計師通過這個bug來相容ie6.0和firefox,即採用:div {margin:30px!important;margin:28px;}。但是ie7.0把這個bug給修復了,所以問題又出現了,怎麼相容 ie.7.0的同時又能相容ie6.0和firefox?      3. Box Model的改變      在IE7中,為了適應CSS2.1 box model修改了溢位的行為。      4. ie7.0中一些CSS filter將不再可用      IE7中修改了許多潛在解析錯誤,這些可能會阻止filter在以前的IE版本中正常工作。如:*HTML filter,下劃線filter和/**/註釋filter等等。      5. ie7.0對很多不規範的css不再支援,對js語法要求更嚴格規範。

overflow:hidden這個CSS樣式是大家常用到的CSS樣式,但是大多數人對這個樣式的理解僅僅侷限於隱藏溢位,而對於清除浮動這個含義不是很瞭解。

一提到清除浮動,我們就會想到另外一個CSS樣式:clear:both,我相信對於這個屬性的理解大家都不成問題的。但是對於“浮動”這個詞到底包含什麼樣的含義呢?我們下面來詳細的闡述一下。

這是一個常用的div寫法,下面我們來書寫樣式。大家可以在DMX中自己做試驗

#wai{ width:500px;  background:#000; height:500px;}
#nei { float:left; width:600px; height:600px; background:red;}

可以看到,我給nei這個id加了一個浮動,我們常規的理解是,我們允許nei這個id的div的右邊出現其他的內容,只要它的寬度不超過wai這個div和nei這個div的剩餘值。

如果div wai中還包含其他的div,我不允許它出現在nei的右側,我們則用樣式clear:both指定這個div,不允許它浮動在nei右側。

這些在ie6裡面是正確的。但是在火狐或者其他瀏覽器裡面,我們發現問題並非如此簡單。我們發現,當nei這個div的寬度和高度都大於wai這個div的時候,wai並沒有被內撐開而是依舊顯示為我們指定的寬高。在我的例子中,都是500。

這個時候我不理解了,我搜索了很多的資料,但是都沒能理解這是為什麼,直到看到別人在類似的情況下給wai這個div加了一個 overflow:hidden這個屬性解決了這個問題。

我們直到overflow:hidden這個屬性的作用是隱藏溢位,給wai加上這個屬性後,我們的nei的寬高自動的被隱藏掉了。另外,我們再做一個試驗,將wai這個div的高度值刪除後,我們發現,wai的高度自動的被nei這個div的高度值給撐開了。

說到這裡,我們再來理解一下“浮動”這個詞的含義。我們原先的理解是,在一個平面上的浮動,但是通過這個試驗,我們發現,這不僅僅是一個平面上的浮動,而是一個立體的浮動!

也就是說,當nei這個div加上浮動這個屬性的時候,在顯示器的側面,它已經脫離了wai這個div,也就是說,此時的nei的寬高是多少,對於已經脫離了的wai來說,都是不起作用的。打個形象的比喻就是當JJ脫離BB的時候,JJ的大小對於BB是沒有撐開的作用的(有點少兒不宜的感覺-_-|||)

OK,當我們全面的理解了浮動這個詞的含義的時候,我們就理解overflow:hidden這個屬性中的解釋,清除浮動是什麼意思了。也就是說,當我們給wai這個div加上overflow:hidden這個屬性的時候,其中的nei等等帶浮動屬性的div的在這個立體的浮動已經被清除了,就好比JJ又進入了BB內,JJ的大小自然又會影響到BB的大小。

這就是overflow:hidden這個屬性清除浮動的準確含義。

當我們沒有給wai這個div設定高度的時候,nei這個div的高度,就會撐開wai這個div,而在另一個方面,我們要注意到的是,當我們給wai這個div加上一個高度值,那麼無論nei這個div的高度是多少,wai這個高度都是我們設定的值。而當nei的高度超過wai的高度的時候,超出的部分就會被隱藏。這就是隱藏溢位的含義!

我相信,通過我的這些文字,大家對overflow:hidden這個屬性有了全新的認識。希望大家和我一樣,在div+css學習中能夠不斷的進步!

1、DOCTYPE 影響 CSS 處理

2、FF:div 設定 margin-left, margin-right 為 auto 時已經居中,IE 不行

3、FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

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

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

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

7、cursor: pointer 可以同時在 IE FF 中顯示遊標手指狀, hand 僅 IE 可以

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

9、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法:

div{margin:30px!important;margin:28px;}

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

div{maring:30px;margin:28px}

重複定義的話按照最後一個來執行,所以不可以只寫 margin:XXpx!important;

10、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}

關於這個/**/是什麼我也不太明白,只知道IE5和firefox都支援但IE6不支援。

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

ul{margin:0;padding:0;}

就能解決大部分問題 注意事項: 1、float的div一定要閉合。 例如:(其中floatA、floatB的屬性已經設定為float:left;)

<#div id="floatA" >
<#div id="floatB" >
<#div id="NOTfloatC" >

這裡的NOTfloatC並不希望繼續平移,而是希望往下排。 這段程式碼在IE中毫無問題,問題出在FF。原因是NOTfloatC並非float標籤,必須將float標籤閉合。 在

<#div class="floatB">
<#div class="NOTfloatC">
之間加上
<#div class="clear">

這個div一定要注意宣告位置,一定要放在最恰當的地方,而且必須與兩個具有float屬性的div同級,之間不能存在巢狀關係,否則會產生異常。 並且將clear這種樣式定義為為如下即可:

.clear{
clear:both;}

此外,為了讓高度能自動適應,要在wrapper裡面加上overflow:hidden; 當包含float的box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私有屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了相容。 例如某一個wrapper如下定義:

以下為引用的內容:

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;} 

以下前遇到過 2、margin加倍的問題。

設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。

解決方案

是在這個div裡面加上display:inline; 例如:

<#div id="imfloat">
相應的css為


 
 
 以下為引用的內容:
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/} 

3、關於容器的包涵關係

很多時候,尤其是容器內有平行佈局,例如兩、三個float的div時,寬度很容易出現問題。在IE中,外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取畫素級的精度。

4、關於高度的問題

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

5、最狠的手段 - !important;

如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於"!important"會自動優先解析,然而IE則會忽略。如下

以下為引用的內容:

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 

值得注意的是,一定要將xxxx !important 這句放置在另一句之上,上面已經提過 undefined undefined

irefox不支援hand,但ie支援pointer 解決方法: 統一使用pointer

  1. padding 問題
padding 5px 4px 3px 1px FireFox無法解釋簡寫, 
必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px; 
  1. 消除ul、ol等列表的縮排

  2. 消除ul、ol等列表的縮排樣式應寫成

    list-style:none;margin:0px;padding:0px;

其中margin屬性對IE有效,padding屬性對FireFox有效

  1. CSS透明 IE:

    filter:progidXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:opacity:0.6。

  2. CSS圓角 IE:不支援圓角。 FF: -moz-border-radius:4px,或者

    -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;。

  3. CSS雙線凹凸邊框 IE:border:2px outset;。 FF:

    -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080;

  4. 濾鏡 IE中支援使用濾鏡,而Firefox中不支援.

  5. 禁止選取網頁內容: 在IE中一般用js:obj.onselectstart=function(){return false;}; 而firefox用CSS:-moz-user-select:none;

常見相容問題:

1、DOCTYPE 影響 CSS 處理

2、FF:div 設定 margin-left, margin-right 為 auto 時已經居中,IE 不行

3、FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

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

5、FF: 支援 !important, IE 則忽略, 可用 !important 為 FF 非凡設定樣式

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

7、cursor: pointer 可以同時在 IE FF 中顯示遊標手指狀, hand 僅 IE 可以

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

9、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法:

div{margin:30px!important;margin:28px;}

注重這兩個margin的順序一定不能寫反,據阿捷的說法!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:

div{maring:30px;margin:28px}

重複定義的話按照最後一個來執行,所以不可以只寫margin:XXpx!important; 10、IE5 和IE6的BOX解釋不一致 模板無憂-Mb5u.com 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}

關於這個/**/是什麼我也不太明白,只知道IE5和firefox都支援但IE6不支援。

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

ul{margin:0;padding:0;}

注重事項:

1、float的div一定要閉合。

例如:(其中floatA、floatB的屬性已經設定為float:left;)

<#div id=“floatA” > <#div id=“floatB” > <#div id=“NOTfloatC” >

這裡的NOTfloatC並不希望繼續平移,而是希望往下排。

這段程式碼在IE中毫無問題,問題出在FF。原因是NOTfloatC並非float標籤,必須將float標籤閉合。

<#div class=“floatB”>

<#div class=“NOTfloatC”>

之間加上

<#div class=“clear”>

這個div一定要注重宣告位置,一定要放在最恰當的地方,而且必須與兩個具有float屬性的div同級,之間不能存在巢狀關係,否則會產生異常。

並且將clear這種樣式定義為為如下即可:

.clear{ 此外,為了讓高度能自動適應,要在wrapper裡面加上overflow:hidden;

當包含float的box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私有屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了相容。 例如某一個wrapper如下定義:

以下為引用的內容:

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;} 

2、margin加倍的問題。 MB5u.com__模板無憂 設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。 是在這個div裡面加上display:inline; www.MB5U__COM 例如:

<#div id=“imfloat”>

相應的css為

以下為引用的內容:

#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/} 

3、關於容器的包涵關係

很多時候,尤其是容器內有平行佈局,例如兩、三個float的div時,寬度很輕易出現問題。在IE中,外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取畫素級的精度。 Mb5U.com-模板無憂 4、關於高度的問題

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

5、最狠的手段 - !important; MB5u.com__模板無憂 假如實在沒有辦法解決一些細節問題,可以用這個方法.FF對於"!important"會自動優先解析,然而IE則會忽略。如下

以下為引用的內容:

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 

值得注重的是,一定要將xxxx !important 這句放置在另一句之上,上面已經提過 undefined undefined

CSS相容IE與Firefox要點分析2006-10-15 14:43IE vs FF CSS 相容要點:

DOCTYPE 影響 CSS 處理

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

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

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

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

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

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

FF: 連結加邊框和背景色,需設定 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},關於這個//是什麼我也不太明白,只知道IE5和firefox都支援但IE6不支援,如果有人理解的話,請告訴我一聲,謝了!:)

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

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

二、 CSS對瀏覽器器的相容性具有很高的價值,通常情況下IE和火狐瀏覽器存在很大的解析差異,今天和大家談談火狐瀏覽器和IE瀏覽器下CSS相容的問題,並推薦兩篇不錯的文章給大家:網頁設計師必備的火狐擴充套件 和 IE和火狐的css相容性問題彙總,下面進入正題:

1.DOCTYPE 影響 CSS 處理

2.FF: div 設定 margin-left, margin-right 為 auto 時已經居中, IE 不行

3.FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

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

5.FF: 支援 !important, IE 則忽略, 可用 !important 為火狐特別設定樣式

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

7.{cursor: pointer 可以同時在 IE、火狐中顯示遊標手指狀, hand 僅 IE 可以}

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

9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法: div{margin:30px!important;margin:28px;}注意這兩個margin的順序一定不能寫反,據阿捷的說法! important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣: div{maring:30px;margin:28px}重複定義的話按照最後一個來執行,所以不可以只寫margin:XXpx! important;

11.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義 ul{margin:0;padding:0;}就能解決大部分問題

注意事項:

1、float的div一定要閉合。

例如:(其中floatA、floatB的屬性已經設定為float:left;) <#div id=”floatA” >

<#div id=”floatB” >

<#div id=”NOTfloatC” >這裡的NOTfloatC並不希望繼續平移,而是希望往下排。

這段程式碼在IE中毫無問題,問題出在火狐瀏覽器。原因是NOTfloatC並非float標籤,必須將float標籤閉合。

在 <#div class=”floatB”>

<#div class=”NOTfloatC”>之間加上 <#div class=”clear”>這個div一定要注意宣告位置,一定要放在最恰當的地方,而且必須與兩個具有float屬性的div同級,之間不能存在巢狀關係,否則會產生異常。

並且將clear這種樣式定義為為如下即可: .clear{

clear:both;}此外,為了讓高度能自動適應,要在wrapper裡面加上overflow:hidden;

當包含float的box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私有屬性,用zoom:1;可以做到,這樣就達到了相容。

例如某一個wrapper如下定義: .colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

2、margin加倍的問題

設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。

解決方案是在這個div裡面加上display:inline;

例如:

<#div id=”imfloat”>

相應的css為

#IamFloat{

float:left;

margin:5px;/IE下理解為10px/

display:inline;/IE下再理解為5px/}

3、關於容器的包涵關係

很多時候,尤其是容器內有平行佈局,例如兩、三個float的div時,寬度很容易出現問題。在IE中,外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取畫素級的精度。

4、關於高度的問題

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

5、最狠的手段 - !important;

如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於”!important”會自動優先解析,然而IE則會忽略.如下 .tabd1{

background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /Style for FF/

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是,一定要將xxxx !important 這句放置在另一句之上,上面已經提過

IE7.0出來了,對CSS的支援又有新問題。瀏覽器多了,網頁相容性更差了,疲於奔命的還是我們 ,為解決IE7.0的相容問題,找來了下面這篇文章:

現在我大部分都是用!important來hack,對於ie6和火狐瀏覽器測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁面沒按要求顯示!搜尋了一下,找到一個針對IE7不錯的hack方式就是使用“*+html”,現在用IE7瀏覽一下,應該沒有問題了。

現在寫一個CSS可以這樣:

#example { color: #333; } /* Moz */

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

那麼在火狐瀏覽器下字型顏色顯示為#333,IE6下字型顏色顯示為#666,IE7下字型顏色顯示為#999

IE瀏覽器和Firefox(火狐)瀏覽器相容性——Javascript篇

  1. document.form.item 問題 (1)現有問題: 現有程式碼中存在許多 document.formName.item(“itemName”) 這樣的語句,不能在Firefox(火狐)下執行 (2)解決方法: 改用 document.formName.elements[“elementName”] (3)其它 參見 2

  2. 集合類物件問題 (1)現有問題: 現有程式碼中許多集合類物件取用時使用 (),IE 能接受,Firefox(火狐)不能。 (2)解決方法:

改用 [] 作為下標運算。如:document.forms(“formName”) 改為 document.forms[“formName”]。

又如:document.getElementsByName(“inputName”)(1) 改為 document.getElementsByName(“inputName”)[1] (3)其它

  1. window.event (1)現有問題: 使用 window.event 無法在火狐瀏覽器上執行 (2)解決方法: 火狐 的 event 只能在事件發生的現場使用,此問題暫無法解決。可以這樣變通: 原 程式碼(可在IE中執行): <br /><input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/><br />...<br /><script language="javascript"><br />function gotoSubmit() {<br />...<br />alert(window.event); // use window.event<br />...<br />}<br /></script>

新 程式碼(可在IE和火狐中執行):

 <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/><br />...<br /><script language="javascript"><br />function gotoSubmit(evt) {<br />evt = evt ? evt : (window.event ? window.event : null);<br />...<br />alert(evt); // use evt<br />...<br />}<br /></script>
此外,如果新程式碼中第一行不改,

與老程式碼一樣的話(即 gotoSubmit 呼叫沒有給引數),則仍然只能在IE中執行,但不會出錯。所以,這種方案 tpl 部分仍與老程式碼相容。

  1. HTML 物件的 id 作為物件名的問題 (1)現有問題 在 IE 中,HTML 物件的 ID 可以作為 document 的下屬物件變數名直接使用。在火狐中不能。 (2)解決方法 用 getElementById(“idName”) 代替 idName 作為物件變數使用。

  2. 用idName字串取得物件的問題 (1)現有問題 在IE中,利用 eval(idName) 可以取得 id 為 idName 的 HTML 物件,在火狐中不能。 (2)解決方法 用 getElementById(idName) 代替 eval(idName)。

  3. 變數名與某 HTML 物件 id 相同的問題 (1)現有問題 在 火狐 中,因為物件 id 不作為 HTML 物件的名稱,所以可以使用與 HTML 物件 id 相同的變數名,IE中能。 (2)解決方法 在宣告變數時,一律加上 var ,以避免歧義,這樣在 IE 中亦可正常執行。 此外,最好不要取與 HTML 物件 id 相同的變數名,以減少錯誤。 (3)其它 參見 問題4

  4. event.x 與 event.y 問題 (1)現有問題 在IE 中,event 物件有 x, y 屬性,火狐中沒有。 (2)解決方法 在火狐中,與event.x 等效的是 event.pageX。但event.pageX IE中沒有。 故採用 event.clientX 代替 event.x。在IE 中也有這個變數。 event.clientX 與 event.pageX 有微妙的差別(當整個頁面有滾動條的時候),不過大多數時候是等效的。

如果要完全一樣,可以稍麻煩些: mX = event.x ? event.x : event.pageX; 然後用 mX 代替 event.x (3)其它 event.layerX 在IE與火狐中都有,具體意義有無差別尚未試驗。

  1. 關於frame (1)現有問題 在 IE中 可以用window.testFrame取得該frame,火狐中不行 (2)解決方法 在frame的使用方面火狐和ie的最主要的區別是: 如果在frame標籤中書寫了以下屬性:

那麼ie可以通過id或者name訪問這個frame對應的window物件 而火狐只可以通過name來訪問這個frame對應的window物件 例如如果上述frame標籤寫在最上層的window裡面的htm裡面,那麼可以這樣訪問 ie: window.top.frameId或者window.top.frameName來訪問這個window物件 火狐: 只能這樣window.top.frameName來訪問這個window物件

另外,在火狐和ie中都可以使用window.top.document.getElementById(“frameId”)來訪問frame標籤

並且可以通過window.top.document.getElementById(“testFrame”).src = 'xx.htm’來切換frame的內容

也都可以通過window.top.frameName.location = 'xx.htm’來切換frame的內容

關於frame和window的描述可以參見bbs的‘window與frame’文章 以及/test/js/test_frame/目錄下面的測試 ----adun 2004.12.09修改

  1. 在火狐中,自己定義的屬性必須getAttribute()取得

10.在火狐中沒有 parentElement parement.children 而用 parentNode parentNode.childNodes childNodes的下標的含義在IE和火狐中不同,火狐使用DOM規範,childNodes中會插入空白文字節點。 一般可以通過node.getElementsByTagName()來回避這個問題。 當html中節點缺失時,IE和火狐對parentNode的解釋不同,例如

<form>
<table>
<input/>
</table>
</form>

火狐中input.parentNode的值為form, 而IE中input.parentNode的值為空節點

火狐中節點沒有removeNode方法,必須使用如下方法 node.parentNode.removeChild(node)

11.const 問題 (1)現有問題: 在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。 (2)解決方法: 不使用 const ,以 var 代替。

  1. body 物件 火狐的body在body標籤沒有被瀏覽器完全讀入之前就存在,而IE則必須在body完全被讀入之後才存在

  2. url encoding 在js中如果書寫url就直接寫&不要寫&例如var url = ‘xx.jsp?objectName=xx&objectEvent=xxx’; frm.action = url那麼很有可能url不會被正常顯示以至於引數沒有正確的傳到伺服器 一般會伺服器報錯引數沒有找到 當然如果是在tpl中例外,因為tpl中符合xml規範,要求&書寫為& 一般火狐無法識別js中的&

  3. nodeName 和 tagName 問題 (1)現有問題: 在火狐中,所有節點均有 nodeName 值,但 textNode 沒有 tagName 值。在 IE 中,nodeName 的使用好象 有問題(具體情況沒有測試,但我的IE已經死了好幾次)。 (2)解決方法: 使用 tagName,但應檢測其是否為空。

  4. 元素屬性 IE下 input.type屬性為只讀,但是火狐下可以修改

  5. document.getElementsByName() 和 document.all[name] 的問題 (1)現有問題: 在 IE 中,getElementsByName()、document.all[name] 均不能用來取得 div 元素(是否還有其它不能取的元素還不知道)。

17.相容firefox的 outerHTML,FF中沒有outerHtml的方法。

if (window.HTMLElement) {
   HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
         var r=this.ownerDocument.createRange();
         r.setStartBefore(this);
         var df=r.createContextualFragment(sHTML);
         this.parentNode.replaceChild(df,this);
         return sHTML;
     });

     HTMLElement.prototype.__defineGetter__("outerHTML",function() {
     var attr;
         var attrs=this.attributes;
         var str="<"+this.tagName.toLowerCase();
         for (var i=0;i<attrs.length;i++) {
             attr=attrs[i];
             if(attr.specified)
                 str+=" "+attr.name+'="'+attr.value+'"';
         }
         if(!this.canHaveChildren)
             return str+">";
         return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
         });



HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
     switch(this.tagName.toLowerCase()) {
         case "area":
         case "base":
         case "basefont":
         case "col":
         case "frame":
         case "hr":
         case "img":
         case "br":
         case "input":
         case "isindex":
         case "link":
         case "meta":
         case "param":
         return false;
     }
     return true;
   });
}

18.自定義屬性問題

說明:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性.

19.eval(“idName”)問題

說明:IE下,可以使用eval(“idName”)或getElementById(“idName”)來取得id為idName的HTML物件;Firefox下只能使用getElementById(“idName”)來取得id為idName的HTML物件. 解決方法:統一用getElementById(“idName”)來取得id為idName的HTML物件.

20.變數名與某HTML物件ID相同的問題

說明:IE下,HTML物件的ID可以作為document的下屬物件變數名直接使用;Firefox下則不能.Firefox下,可以使用與HTML物件ID相同的變數名;IE下則不能。 解決方法:使用document.getElementById(“idName”)代替document.idName.最好不要取HTML物件ID相同的變數名,以減少錯誤;在宣告變數時,一律加上var,以避免歧義.

21.const問題

說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量. 解決方法:統一使用var關鍵字來定義常量.

22.input.type屬性問題

說明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫.

23.window.event問題

說明:window.event只能在IE下執行,而不能在Firefox下執行,這是因為Firefox的event只能在事件發生的現場使用. 解決方法: IE:

<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>

24.event.x與event.y問題

說明:IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even物件有pageX,pageY屬性,但是沒有x,y屬性. 解決方法:使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.

25.event.srcElement問題

說明:IE下,even物件有srcElement屬性,但是沒有target屬性;Firefox下,even物件有target屬性,但是沒有srcElement屬性. 解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target.

26.window.location.href問題

說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location. 解決方法:使用window.location來代替window.location.href.

27.模態和非模態視窗問題

說明:IE下,可以通過showModalDialog和showModelessDialog開啟模態和非模態視窗;Firefox下則不能. 解決方法:直接使用window.open(pageURL,name,parameters)方式開啟新視窗。

如 果需要將子視窗中的引數傳遞迴父視窗,可以在子視窗中使用window.opener來訪問父視窗. 例如:var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;

28.frame問題

以下面的frame為例:

(1)訪問frame物件: IE:使用window.frameId或者window.frameName來訪問這個frame物件. Firefox:只能使用window.frameName來訪問這個frame物件. 另外,在IE和Firefox中都可以使用window.document.getElementById(“frameId”)來訪問這個frame物件.

(2)切換frame內容: 在IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.

如果需要將frame中的引數傳回父視窗,可以在frme中使用parent來訪問父視窗。例如:parent.document.form1.filename.value=“Aqing”;

29.body問題

Firefox的body在body標籤沒有被瀏覽器完全讀入之前就存在;而IE的body則必須在body標籤被瀏覽器完全讀入之後才存在.

例如: Firefox:

<body >
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox:
<body >
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
  1. 事件委託方法

IE:document.body.onload = inject; //Function inject()在這之前已被實現

Firefox:document.body.onload = inject();

有人說標準是:

document.body.onload=new Function(‘inject()’);

  1. firefox與IE(parentElement)的父元素的區別

IE:obj.parentElement firefox:obj.parentNode

解決方法: 因為firefox與IE都支援DOM,因此使用obj.parentNode是不錯選擇.

32.cursor:hand VS cursor:pointer

firefox不支援hand,但ie支援pointer

解決方法: 統一使用pointer

33.innerText在IE中能正常工作,但是innerText在FireFox中卻不行.

解決方法:

if(navigator.appName.indexOf(“Explorer”) > -1){

 document.getElementById('element').innerText = "my text";

} else{

 document.getElementById('element').textContent = "my text";

}

  1. FireFox中類似 obj.style.height = imgObj.height 的語句無效

解決方法:

obj.style.height = imgObj.height + ‘px’;

  1. IE,firefox以及其它瀏覽器對於 table 標籤的操作都各不相同,在ie中不允許對table和tr的innerHTML賦值,使用js增加一個tr時,使用appendChile方法也不管用。

解決方法:

//向table追加一個空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
  1. padding 問題

padding 5px 4px 3px 1px FireFox無法解釋簡寫,

必須改成

 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
  1. 消除ul、ol等列表的縮排時

樣式應寫成:list-style:none;margin:0px;padding:0px;

其中margin屬性對IE有效,padding屬性對FireFox有效

  1. CSS透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF:opacity:0.6。

  1. CSS圓角

IE:不支援圓角。

FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

  1. CSS雙線凹凸邊框

IE:border:2px outset;。

FF:

-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

相容各個瀏覽器(ie6,ie7,firefox)的利用Javascript來選擇本地圖片預覽的功能

相容各個瀏覽器(ie6,ie7,firefox)的利用Javascript來選擇本地圖片預覽的功能 最近要做個上傳,想實現file檔案框上傳選擇檔案後,能夠立即預覽到選擇的圖片。在ie6下一試就行。但在firefox下往往不行。原來是[url=file:///]file:///[/url]做怪。現在特別整理下,製作了適合各種瀏覽器的預覽效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片預覽 - http://www.itokit.com web開發技術</title>
<script> 
function $(o) {
        return document.getElementById(o);
}
function SeePic(img,f){
        var i = $(img);
        var f = $(f);
        if (f.value != "") {
                if (f.value.indexOf("http://") >= 0) {
                        i.src = f.value;
                } else {
                        i.src = 'file:///'+f.value;
                }
                i.style.display = "block";
                return;
        }
        i.style.display = "none";
} 
</script> 
</head>

ie6下的(但不支援firefox)

<img src="" id="myimg1" style="display:none;">
<input type="file" onchange="document.getElementById('myimg1').src=this.value;document.getElementById('myimg1').style.display='block'" size="20">

ie7和ie6下都相容的(但不支援firefox)

<img src="" id="myimg2" style="display:none;">
<input type="file" onpropertychange="document.getElementById('myimg2').src=this.value;document.getElementById('myimg2').style.display='block'" onchange="document.getElementById('myimg1').src=this.value;document.getElementById('myimg1').style.display='block'" size="20">

Firefox下(同樣也適合ie6,ie7哦):

<form id='frm1' name='frm1'> 
<div><input type='file' name='upfile' id='upfile' onChange="SeePic('img', 'upfile');"></div> 
<div><image src='' id='img' name='img' style="display:none;"> 
</form> 
</body>
</html>