IE、FF、Safari、OP不同瀏覽器兼容報告

1?????????瀏覽器內核簡介

?

Trident	IE瀏覽器(GreenBrowser綠色瀏覽器,?遨游瀏覽器....都是IE)
Geckos	FireFox
Presto	Opera
Webkit	Safari、Chrome

?

瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“解釋引擎”，不過我們一般習慣將之稱為“瀏覽器內核”。負責對網頁語法的解釋（如HTML、JavaScript）并渲染（顯示）網頁。

　?　所以，通常所謂的瀏覽器內核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語?法的解釋也有不同，因此同一網頁在不同的內核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網頁編寫者需要在不同內核的瀏覽器中測試網頁顯示效果的原?因。

　　瀏覽器內核很多，如果加上所有的幾乎沒有什么人在用的非商業的免費內核，那么可能大約有10款以上甚至更多，不過通常我們比較常見的大約只有以下四種，下面先簡單介紹一下。

1.1??????Trident：

IE瀏覽器使用的內核,該內核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎之上修改而來的，并沿用到目前的IE8。?Trident實際上是一款開放的內核，其接口內核設計的相當成熟，因此才有許多采用IE內核而非IE的瀏覽器涌現（如?Maxthon、The World?、TT、GreenBrowser、AvantBrowser等）。此外，為了方便也有很多人直接簡稱其為IE內核（當然也不排除有部分人是因為不知道內?核名稱而只好如此說）。

　　由于IE本身的“壟斷性”（雖然名義上IE并非壟斷，但實際上，特別是從Windows 95年代一直到XP初期，就市場占有率來說IE的確借助Windows的東風處于“壟斷”的地位）而使得Trident內核的長期一家獨大，微軟很長時間都并沒有更新Trident內核，這導致了兩個后果——一是Trident內核曾經幾乎與W3C標準脫節（2005年），二是Trident內核的大量?Bug等安全性問題沒有得到及時解決，然后加上一些致力于開源的開發者和一些學者們公開自己認為IE瀏覽器不安全的觀點，也有很多用戶轉向了其他瀏覽?器，Firefox和Opera就是這個時候興起的。非Trident內核瀏覽器的市場占有率大幅提高也致使許多網頁開發人員開始注意網頁標準和非IE瀏?覽器的瀏覽效果問題。

1.2??????Gecko：

Netscape6開始采用的內核，后來的Mozilla FireFox也采用了該內核，Gecko的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因為這是個開源?內核，因此受到許多人的青睞，Gecko內核的瀏覽器也很多，這也是Geckos內核雖然年輕但市場占有率能夠迅速提高的重要原因。

　　事?實上，Gecko引擎的由來跟IE不無關系，前面說過IE沒有使用W3C的標準，這導致了微軟內部一些開發人員的不滿；他們與當時已經停止更新了的?Netscape的一些員工一起創辦了Mozilla，以當時的Mosaic內核為基礎重新編寫內核，于是開發出了Geckos。不過事實上，Gecko?內核的瀏覽器仍然還是Firefox用戶最多，所以有時也會被稱為Firefox內核。此外Gecko也是一個跨平臺內核，可以在Windows、?BSD、Linux和Mac OS X中使用。

1.3??????Presto：

目前Opera采用的內核，該內核在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。

　?　實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上，Presto有著天生的優勢，頁面的全部或者部分都能夠在回應腳本事件時等情況下?被重新解析。此外該內核在執行Javascrīpt的時候有著最快的速度，根據在同等條件下的測試，Presto內核執行同等Javascrīpt所需的?時間僅有Trident和Gecko內核的約1/3（Trident內核最慢，不過兩者相差沒有多大）。那次測試的時候因為Apple機的硬件條件和普通?PC機不同所以沒有測試WebCore內核。只可惜Presto是商業引擎，使用Presto的除開Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770網絡瀏覽器等，這很大程度上限制了Presto的發展。

1.4??????Webkit：

蘋果公司自己的內核，也是蘋果的Safari瀏覽器使用的內核。?Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟?件，在GPL條約下授權，同時支持BSD系統的開發。所以Webkit也是自由軟件，同時開放源代碼。在安全方面不受IE、Firefox的制約，所以?Safari瀏覽器在國內還是很安全的。

　　限于Mac OS X的使用不廣泛和Safari瀏覽器曾經只是Mac OS X的專屬瀏覽器，這個內核本身應該說市場范圍并不大；但似乎根據最新的瀏覽器調查表明，該瀏覽器的市場甚至已經超過了Opera的Presto了——當然?這一方面得益于蘋果轉到x86架構之后的人氣暴漲，另外也是因為Safari 3終于推出了Windows版的緣故吧。Mac下還有OmniWeb、Shiira等人氣很高的瀏覽器。

　　google的chrome也使用webkit作為內核。

WebKit?內核在手機上的應用也十分廣泛，例如?Google?的手機?Gphone、?Apple?的?iPhone, Nokia’s Series 60 browser?等所使用的?Browser?內核引擎，都是基于?WebKit。

?

2?????????Safari特點:

Safari被稱作世界上最快的瀏覽器。但是，新發布的Safari?5從性能上來說已經遠遠超越了其上一個版本。蘋果公司稱，Safari?5的運行速度要比Safari 4快30%，比Chrome 5.0快3%。Safari 5的運行速度甚至是Firefox 3.6的2倍多。

?

增加了一個Reader（閱讀器），取代了以往的RSS Reader。

與其他主流瀏覽器一樣，也增加了一個默認搜索引擎的選項；

包含了Safari 5開發工具。其中有一個“web檢查器”可以顯示Safari與網站的整個交互過程；

增強了對HTML5的支持：包括Geolocation、全屏幕HTML5視頻、 HTML5視頻隱藏式字幕、新的分節元素（article、 aside、footer、header、hgroup、nav和section）、HTML5 AJAX 歷史記錄、EventSource、WebSocket、HTML5可拖移屬性、HTML5表格驗證以及HTML5 Ruby。

Windows版本的Safari 5將支持GPU瀏覽加速。這也是很多瀏覽器的新特征，可以達到更快的瀏覽速度；

歷史記錄可以按照日期搜索了。

Safari 5采用Nitro JavaScript引擎。Mac版Safari 5運行JavaScript腳本的速度比Safari 4快30%，比Chrome 5.0快3%，幾乎達到火狐3.6的兩倍。

2.1??????速度對比

通過使用DNS預讀取，以及改進的網頁緩存技術，Safari 5可以更快地打開網頁。

Safari 5的擴展應用得到沙箱技術的保護，從而提高了安全性和穩定性。

?

2.2??????CSS兼容能力對比

?

2.3??????JavaScript兼容對比

數值越小越好

?

以上數據來源:?http://pcedu.pconline.com.cn/pingce/pingcenormal/0906/1678394.html

?

?

?

3?????????CSS區別及兼容

3.1??????什么是CSS hack？

由于不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
　　這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
　　這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack，也叫寫CSS hack。

?

不同的瀏覽器對CSS的解釋都有一點出入，特別是padding, line-height這些要細微控制的地方，下面的hack基本可以解決這個問題：
?在屬性前加下劃線(_)，那么此屬性只會被IE6解釋
?在屬性前加星號(*)，此屬性只會被IE7解釋
?在屬性值后面加"\9"，表示此屬性只會被IE8解釋

?

?

3.2??????各瀏覽器CSS hack兼容表：

?

IE6

IE7

IE8

Firefox

Chrome

Safari

?

IE6

IE7

IE8

FF

CH

Safari

!important

?

Y

?

Y

?

?

Y

Y

Y

Y

Y

Y

_

Y

?

?

?

?

?

Y

?

?

?

?

?

*

Y

Y

?

?

?

?

Y

Y

?

?

?

?

*+

?

Y

?

?

?

?

Y

Y

?

?

?

?

\9

Y

Y

Y

?

?

?

Y

Y

Y

?

?

?

\0

?

?

Y

?

?

?

?

?

Y

?

?

?

nth-of-type(1)

?

?

?

?

Y

Y

?

?

?

?

?

?

?

整理二:IE6,IE7,FireFox,Opera,Safari兼容CSS的解決方法及CSS差別

IE6,IE7,FireFox,Opera,Safari兼容CSS的解決方法及CSS差別

?

有意思的測試地址:?http://knb.im/css3/

?

3.3??????CSS HACK

以下兩種方法幾乎能解決現今所有HACK.

1, !important
隨著IE7對!important的支持, !important?方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)

2, IE6/IE7對FireFox
*+html?與?*html?是IE特有的標簽, firefox?暫不支持.而*+html?又為?IE7特有標簽.

注意:*+html?對IE7的HACK 必須保證HTML頂部有如下聲明：
　”http://www.w3.org/TR/html4/loose.dtd”>

3.4?常見CSS兼容性問題

div類

1.?居中問題

div里的內容，IE默認為居中，而FF默認為左對齊

可以嘗試增加代碼margin:auto

?

2.?高度問題

兩上下排列或嵌套的div，上面的div設置高度(height)，如果div里的實際內容大于所設高度，在FF中會出現兩個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?產生的雙倍距離

#box {

float:left;

width:100px;

margin:0 0 0 100px; //這種情況之下IE會產生200px的距離

display:inline; //使浮動忽略

}

?

5. padding?問題

FF設置?padding?后，div會增加?height?和?width，但IE不會?（*?標準的?XHTML1.0?定義?dtd?好像一致了）

高度控制恰當，或嘗試使用?height:100%;

寬度減少使用?padding

但根據實際經驗，一般FF和IE的?padding?不會有太大區別，div?的實際寬?= width + padding?，所以div寫全?width和?padding，width?用實際想要的寬減去?padding?定義

?

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

FF里?y?軸上?子div?到?父div?的距離為?父padding +?子marign

IE里?y?軸上?子div?到?父div?的距離為?父padding?和?子marign?里大的一個

FF里?y?軸上?父padding=0?且?border=0?時，子div?到?父div?的距離為0，子marign?作用到?父div?外面

?

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

注意是技巧，不是方法：

寫好標準頭

?

?

高盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div

寬盡量用margin，慎用padding，width算準實際要的減去padding

?

列表類

?

1. ul?標簽在FF中默認是有?padding?值的，而在IE中只有margin有值

先定義?ul {margin:0;padding:0;}

?

2. ul和ol列表縮進問題

消除ul、ol等列表的縮進時，樣式應寫成: {list-style:none;margin:0px;padding:0px;}

?

顯示類

?

1. display:block,inline?兩個元素

display:block; //可以為內嵌元素模擬為塊元素

display:inline; //實現同一行排列的的效果

display:table; //for FF,模擬table的效果

display:block?塊元素，元素的特點是：

總是在新行上開始；

高度，行高以及頂和底邊距都可控制；

寬度缺省是它的容器的100%，除非設定一個寬度

?

，

，

，

，

• ?和?
• ?是塊元素的例子

  display:inline?就是將元素顯示為行內元素，元素的特點是：

  和其他元素都在一行上；

  高，行高及頂和底邊距不可改變；

  寬度就是它的文字或圖片的寬度，不可改變。

  ，，，，，?和??是?inline?元素的例子

  ?

  2.?鼠標手指狀顯示

  全部用標準的寫法?cursor: pointer;

  ?

  背景、圖片類

  ?

  1. background?顯示問題

  全部注意補齊?width，height?屬性

  ?

  2.?背景透明問題

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

  IE: filter: alpha(opacity=10);

  FF: opacity:0.6;

  FF: -moz-opacity:0.10;

  最好兩個都寫，并將opacity屬性放在下面

  ?

  ?

  3.5??????其他兼容技巧

  1, FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)

  
  2,?居中問題.

  
  1).垂直居中.將?line-height?設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
  2).水平居中. margin: 0 auto;(當然不是萬能)

  
  3,?若需給 a 標簽內內容加上 樣式,?需要設置 display: block;(常見于導航標簽)

  
  4, FF?和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.

  
  5, ul?標簽在 FF 下面默認有?list-style?和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)

  
  6,?作為外部 wrapper 的?div?不要定死高度, 最好還加上?overflow: hidden.以達到高度自適應.

  
  7,?關于手形光標. cursor: pointer. 而hand 只適用于 IE.

  ?

  8，html控件除了指定id，還應該加上name屬性;

  9,alt只能在ie下識別，FF和其它瀏覽器必須加title;

  10,如果想按px指定寬度和高度，數字后后要帶”px”,IE默認為px，但FF不識別;

  11,設置表格border寬度，但看起來還是很寬，要加上style="border-collapse:collapse";

  ?

  1?針對firefox ie6 ie7的css樣式
  現在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，
  但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。
  現在寫一個CSS可以這樣：

  #1 { color: #333; }
  * html #1 { color: #666; }
  *+html #1 { color: #999; }
  那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。

  ?

  2 css布局中的居中問題
  主要的樣式定義如下：

  body {TEXT-ALIGN: center;}
  #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
  說明：
  首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對于IE這樣設定就已經可以了。
  但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
  需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，
  只要在每個拆出的div里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto;?就可以了。

  3?盒模型不同解釋.

  #box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
  #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}

  ?

  4?浮動ie產生的雙倍距離

  #box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離 display:inline; //使浮動忽略}
  這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);

  #box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;

  ?

  5 IE與寬度和高度的問題
  IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，
  正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。
  比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：
  #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

  ?

  6?頁面的最小寬度
  min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，
  而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個

  放到 標簽下，然后為div指定一個類：
  然后CSS這樣設計：
  #container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? “600px”: “auto” );}
  第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。

  ?

  7?清除浮動
  .hackbox{ display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;}
  或者加入:after（偽對象）,設置在對象后發生的內容，通常和content配合使用，IE不支持此偽對象，非Ie 瀏覽器支持，
  所以并不影響到IE/WIN瀏覽器。這種的最麻煩的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

  ?

  8 DIV浮動IE文本產生3象素的bug
  左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.

  #box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵}
  HTML代碼

  ?

  9?屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
  p[id]{}div[id]{}
  這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
  屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.

  ?

  10 IE捉迷藏的問題
  當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。
  有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。
  解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。

  ?

  11?高度不適應
  高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用
  margin?或paddign 時。
  例：
  

  
  

  p對象中的內容

  
  
  CSS：#box {background-color:#eee; }
  #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
  解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

  ?

  內置與外置寫法

  外置：

  .main{ float:left;#float:none;_float:none;

  html*.main{ float:left;#float:none;_float:none; }

  *+html .main{ float:left;#float:none;_float:none; }

  * html .main{ float:left;#float:none;_float:none; }

  第1行給Firefox以及其他瀏覽器看

  第2行給safari/IE6/iE7看，如果safari/IE6/iE7 視覺效果不統一，就要在后面跟IE6/IE7的定義

  第3行給IE7看

  第4行給IE6以及更老的版本看

  內置：

  .main{ float:left;#float:none;_float:none;[float:none;]float:none; }

  第1個float給Firefox以及其他瀏覽器看

  第2個加#的float給IE7看

  第3個加_的float給IE6以及更老的版本看

  第4個加[的float給safari看

  第5個加]的float給IE看

  各種常見瀏覽器使用的內核?(Rendering Engine)

  Mozilla Firefox ( Gecko )
  Internet Explorer ( Trident )
  Opera ( Presto )
  Konqueror ( KHTML )
  Safari Swift ( WebKit )

  用css自動隱藏超出寬度內容并省略顯示，瀏覽器兼容ie、ff
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;?別興奮了，該支持的都支持，其他都是騙小朋友滴。基本非IE的瀏覽器的私有屬性都會以-xxx-這樣開始，-o-就是以Presto為引擎的?Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML為引擎的瀏覽器（如Konqueror Safari）、-moz-就是以mozilla的Gecko為引擎的瀏覽器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生產品）的瀏覽器（如Safari、Swift）。
  并不是說像-moz-text-overflow現在有用，而是 一個幻想的寫法，當一個瀏覽器的開發人員決定在瀏覽器支持一種還沒得到公認的屬性時，一般都會在屬性的前面加上-xxx-這種，表明這種是屬于該瀏覽器私 有的屬性，當然，這些屬性多數來自CSS3的，使用這樣的寫法在瀏覽器升級后也許才有作用

  IE、Firefox、Opera和Safari對CSS樣式important和*的支持

  1、IE6、IE7都支持 *，但IE8終于回歸正統，放棄了對*的支持
  2、IE7、IE8、Firefox、Opera、Safari都支持 important

  顧名，important的優先級要高. 舉例說明：
  

  IE6選擇最后一個，即：background-color:#000000; （因為IE6對important不感冒）
  IE7選擇第二個，即：background-color:#000000;（因為IE7開始對important感冒了，同時還死守著它對 * 感情的最后一版本，但important并未起到優先級的作用）
  IE8和Firefox、Opera、Safari選擇第一個，即：background-color:#FF0000 !important;（IE8完全感冒于important，同時丟棄了對*的感情）

  另外再補充一個，下劃線”_“,
  IE6支持下劃線，IE7、IE8和Firefox、Opera、Safari均不支持下劃線。

  ?

  3.6??????其他說明：

  1、?如果你的頁面對IE7兼容沒有問題，又不想大量修改現有代碼，同時又能在IE8中正常使用，微軟聲稱，開發商僅需要在目前兼容IE7的網站上添加一行代碼即可解決問題，此代碼如下：
  
  2、body:nth-of-type(1)?如果這樣寫，表示全局查找body，將會對應第一個

  。
  3、還有其他寫法，比如：
  *html #test{}或者*+html #test{}
  4、*+html對IE7的hack必須保證HTML頂部有如下聲明：
  http://www.w3.org/TR/html4/loose.dtd

  2、?順序：Firefox、IE8、IE7、IE6依次排列。

  3、?下面是補充：

  復制代碼代碼如下:
  selector{
  property:value;
  property:value\9;
  +property:value;
  _property:value;
  }

  當然，注意順序。根據CSS的優先性，上面的寫法，分別針對Firefox、IE8、IE7和IE6顯示值。讓我們看看這個演示：

  
  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  http://www.w3.org/1999/xhtml">
  

  
  
  演示:區分IE6 / IE7 /IE8 /Firefox
  
  
  
  

  
  嘿嘿，小子竟然也用Firefox，藍色文字。
  
  
  
  

  
  
  

  ???提示：您可以先修改部分代碼再運行
  演示的CSS代碼如下：

  復制代碼代碼如下:
  p.ie{
  height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
  color:blue; //?所有瀏覽器
  color:brown\9; //?所有IE瀏覽器
  +color:red; // IE7
  _color:green; // IE6
  }

  哈，事實就這么簡單。你看到的是那一句話呢？如果你多個瀏覽器都測試了，就會看到，顯示的文字和顏色是不同的。為什么？看看我的HTML中這個段落是這樣寫的：

  復制代碼代碼如下:
  

  
  嘿嘿，小子竟然也用Firefox，藍色文字。
  
  
  
  

  對，就是IE條件注釋+CSS的結果。順路學一下IE條件注釋吧。不用再舉例了吧，一看就知道那個對那個了。

  
  display:block;//這個一定要加！！！

  text-overflow:ellipsis;

  overflow:hidden;

  white-space:nowrap;

  ?

  CSS?Hack?雖好且方便兼容各瀏覽器，但是通不過?W3C?驗證，所以還得自己權衡是否有必要去使用。

  4?????????十個非常實用的CSS屬性?但IE不支持

  一、Outline
  　　在調試CSS問題的時候，我常常在指定元素上添加border來精確的查看該?元素會發生什么并幫助確定問題的來源。這常常是有效的，因為它可以在布?局上給我更加具體的可視性。但是如果是塊級元素，這可能會發生某些錯誤——在任何?塊級元素上添加1px的邊框很可能會影響到布局，它會讓這個元素的寬度額?外增加2px。
  　　outline?屬性是完美的替代者，因為它可以在不影響文檔流的情況下呈現該對象。但是IE6?和IE7?不支持?outline?屬性，所以，它不能在這兩個瀏覽器中用于調試。
  
  二、Inherit?(值)
  　　在CSS開發中有很多這樣的例子：通過在特定元素上設置某些樣式來告訴該元素來“繼承”它父級元素的所有已添加的屬性，這樣你就可以避免相當多的鍵盤輸入。
  　?　這可以通過設置?inherit?來很容易的實現。這可能很有用。比如，當重寫?background?屬性的時候，常常會有很多的文字在該屬性中(色?彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同?的背景屬性，一個?inherit?值就可以?搞定一切——這顯然大大的節省了鍵盤輸入。
  　　不幸的是，?inherit?值在IE6和IE7不被支持（除了用于?direction?(文字方向)?和?visibility?屬性）。
  　　某人說，代碼就像女人的裙子——越短越好，看來IE會阻礙我們這個愿望的實現。
  
  三、Empty-Cells
  　　該屬性只用于table或者”display”屬性被設置為”table-cell”的元素。如果你動態的為一個table添加內容，就可能會遇到某個單元格的內容為空的情況，然后你又不希望這個空的單元格的邊框、背景色、背景圖片等隱藏掉。
  　　使用”empty-cells:?hide”就能解決這個問題，它會將可能出現這種情況的單元格完全隱藏掉。
  　　Internet?Explorer?不支持empty-cells屬性。
  
  四、Caption-Side
  　　說到table?的屬性，這個屬性用于聲明顯示在表格的側欄的表格標題。它接受?top?、?bottom?、?left?和?right?四個值。Internet?Exporer?不支持這個屬性，table的標題在IE6和IE7中將總是出現在表格的頂部。
  
  五、Counter-Increment?/?Counter-Reset
  　　有序列表(

  )非常方便，因為它可以省去你手工添加遞增數字的麻煩，而且它允許你不用更改數字就能改變列表的序列。
  　　CSS?擁有?counter-increment?和?counter-reset?屬性，它允許你用來自動生成遞增數字到幾乎所有的HTML元素上，就像有序列表的效果一樣。
  　　這里有個示例：

  Example Source Code?[www.52css.com]

  h2?{counter-increment:?headers;}
  h2:before?{content:?counter(headers)?".?";}

  
  　　上面的樣式將在所有的?

  ?標簽前面自動添加遞增的數字，而且允許你在h2標簽上實現和li標簽同樣的的效果。
  　　但是IE6,?IE7?甚至Safari(直到3.x版本)還不支持這些屬性。當然，IE6也不支持:before?偽元素。
  
  六、Min-Height
  　　有時，一個網站的設計或布局結構需要一個有固定高度的內容區域，否則特定的視覺效果就會丟掉。這可能會因為一個漸變背景、一個獨特的下拉列表、?或者可能是因為PS出來的很酷的發光效果。但是有的時候，頁面中的內容會比較多，而頁面卻不能像預期那樣展開。
  　　這個時候就需要用到?min-height?屬性了，因為它可以告訴瀏覽器在一個特定的塊級元素上渲染最小的高度，不管內容的實際高度是否達到了這個最小高度。然后呢，如果內容超出了最小高度，該元素就會適度的擴展開。
  　　使用min-height?唯一需要注意到的是它在IE6中不被支持。我們都知道IE6在（緩慢的）退出歷史舞臺，但是有的客戶可能仍然要求他們的網站支持這個該死的瀏覽器。
  　　不過令人高興的是，IE6?渲染?height?的值的方法正好和其它瀏覽器渲染“min-height”的方式一樣，所以你只需要一個針對IE6的hack或獨立的樣式表來為該元素添加特定的?height?，這個問題就解決了。
  　　IE6?同樣無視?min-width?、?max-height?和?max-width?，?但是上述方法在這些屬性上也是可行的。
  
  七、:hover
  　　從技術上來說，:hover只是一個偽類，但是它在IE6中不被支持（IE7和IE8支持）。:hover偽類允許你在元素上添加任何的鼠標經過樣式。這非常有用，可以避免(至少在某種程度上)使用JavaScript。
  　　但是如果你的網站，需要完全支持IE6，特別是在中國這種IE6一手遮天的情況下，那么你就必須考慮取消使用這個偽類，除非相關的標簽有個”href”屬性，比如標簽。而且如果要實現這種效果，可能必須借助于javascript和額外的樣式。
  
  八、Display
  　?　Display?通常被設置為這三個值中的一個：?block、inline和?none。“得益于”IE，Display的其它值很少被用到。這些值?包括?inline-block、table、inline-table和table-cell等，這些屬性對于解決一些特殊的布局問題時，是很有用的。
  　　所以，盡管IE?確實支持Display的這三個基本屬性，但是它基本上不支持其它屬性。
  　　其實，IE8對display的屬性支持已經相當完整了。不過，對于inline-block屬性，IE6/7只支持本身為inline的元素。
  
  九.?Clip
  　?　這是一個在特殊情況下能派上用場的很有趣的CSS屬性。它可能和不可預知的、動態生成的內容結合起來。簡單來說，這個屬性允許你在一個特定的元素上?指?定隱藏區域——也可以理解為，在一個絕對定位的元素中，按照一定的設置來裁剪該元素的顯示區域，超出該區域的內容會被隱藏掉。語法看起來像這樣的：
  
  

  Example Source Code?[www.52css.com]

  div.clipped?{
  ????padding:?20px;
  ????width:?400px;
  ????height:?400px;
  ????clip:?rect(20px,?300px,?200px,?100px);
  ????position:?absolute;
  ????}

  
  　　修剪只能用于一個絕對定位的元素，而且只用使用矩形區域。括號內的數字劃出的區域(200px*180px大小)為可見區域，該區域以外的內容不可見或者被剪切掉。
  　　技術上來講，?clip?屬性被IE支持，但是只支持無逗號的語法，比如

  Example Source Code?[www.52css.com]

  div.clipped?{
  ????padding:?20px;
  ????width:?400px;
  ????height:?400px;
  ????clip:?rect(20px?300px?200px?100px);
  ????position:?absolute;
  ????}

  
  　　上面的樣式（rect后面括號里的屬性沒有用逗號隔開）在大多數瀏覽器下都可運行，但是可能不會通過CSS驗證，因為語句沒有用逗號隔開。
  
  十、:focus
  　?　這是另外一個偽類需要在這里被提及的，因為所有的非IE瀏覽器，都支持這個屬性。:focus偽類允許你聲明一個特別的樣式，當一個頁面元素成為鍵?盤?(鼠標)焦點的時候，將該樣式動態的應用到該元素上。這在表單元素上非常有用，因為你可以在一個輸入框被選中的時候給它添加一個邊框。
  　　下面的樣式將在輸入框成為鍵盤焦點的時候添加一個紅色的邊框：

  Example Source Code?[www.52css.com]

  input:focus?{
  ????border:?1px?solid?#f00;
  ????}

  5?????????你需要熟知10個的CSS3屬性

  http://www2.flash8.net/teach/8537.htm

  ?

  IE,FF均不支持,Safari和GOOLE支持

  6?????????JS兼容解決

  下面列出JS在IE和FF下不兼容的方法

  1、Dom操作

  var?wrongGet = obj.firstChild;

  var?wrongGet = obj.lastChild;

  var?wrongGet = obj.nextSibling;

  var?wrongGet = obj.childNodes;

  var?wrongGet = obj.previousSibling;

  2、HTML控件如果沒有ID，應該加上id屬性:

  Not compatible:

  tmpHtml.Append("?+ str1 +?"\" value=\"0\">");

  Compatible:

  tmpHtml.Append("?+ str1 +?"\"?id=\""?+ str1 +?"\"?value=\"0\">");

  3、不要用eval,而改為getElementById,eval在IE下可以使用，但FF里有時不支持或轉換出錯:

  Not compatible:

  objField1 =?eval("document.mainform.meritid"?+ i);

  Compatible:

  objField1 =?document.getElementByIdx_x("meritid"?+ i);(always could not get the object).

  4、?表格操作,改aRow(i).cells為aRows[i].cells

  Not compatible:

  aRows(i).cells

  Compatible:

  aRows[i].cells

  5、?自定義屬性使用標準get或set獲取和設置:

  Not compatible:

  var?str =?Obj.customizedvalue;

  Compatible:

  var?str =?Obj.getAttribute(“customizedvalue”);

  var str =?Obj.setAttribute(“customizedvalue”);

  6、?移除select控件時，使用:

  Not compatible:

  oSel.options.remove(oSel.selectedIndex);

  Compatible:

  oSel.remove(oSel.selectedIndex);

  7、?FF樣式不支持expression表達式，改用JS方法;

  Not compatible:

  top:?expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

  width:expression(document.getElementByIdx_x('CenterDIV').offsetWidth-16+'px');

  Compatible:

  改用JS方法;

  8、?FF不支持onmouseleave事件，改用onmouseout事件:

  Not compatible:

  div.attachEvent("onmouseleave",new?Function("clearPopUpMenu();"));

  Compatible:

  If(windows.isIE)

  div.attachEvent("onmouseleave",new?Function("clearPopUpMenu();"));

  else

  div.attachEvent("onmouseout",new?Function("clearPopUpMenu();"));

  9、FF不支持document.readyState!="complete"

  10、FF不支持window.createPopup();

  11、FF不支持document.body.scrollLeft

  Not compatible:

  var?_left = document.body.scrollLeft;

  Compatible:

  var?_left = document.documentElement.scrollLeft;

  ??????

  FF使用下列屬性時要小心:

  scrollHeight|scrollLeft|scrollTop|scrollWidth

  12、FF指定寬度或高度為像素時要加”px”:

  Not compatible:

  document.getElementByIdx_x(strObjId).style.width =?10;

  Compatible:

  document.getElementByIdx_x(strObjId).style.width =?‘10px’;

  13、style=”cursor:hand”?應該為 style=”cursor:pointer”

  Not compatible:

  style=”cursor:hand”

  Compatible:

  style=”cursor:pointer”

  14、alt后必須加title:

  Not compatible:

  sbdTempHtml.Append("

  ");

  Compatible:

  sbdTempHtml.Append("?alt=\"\" title=\"\"?src=\"../Graphics/i_expand.gif\" />

");

15、在tr里,FF不支持“display:block”

Not compatible:

document.getElementByIdx_x("hrmtr").style.display =?"block";

Compatible:

document.getElementByIdx_x("hrmtr").style.display =?"";

?

?

16、FF使用濾鏡功能時,要設置透明度

Not compatible:

filter:alpha(opacity=50);

Compatible:

filter:alpha(opacity=50);

-moz-opacity:0.5;?

?

?

if (!windows.isIE)

obj.style.MozOpacity = 0.5;

17、全選

在IE里我們可以用 “objInput.select()”?選中textbox里的值.?但在FF只能用focus().

Compatible:

if ( windows.isIE )

?????? {

??????????document.mainform.elements[checkCategory].select();

????? ?}

?????? else

?????? {

????????? document.getElementByIdx_x(“checkCategory”).focus();??????

?? }

18、用js插入行或列時應注意:

Not compatible:

????? tr = tab.insertRow();

????? td = tr.insertCell();

Compatible:

????? tr = tab.insertRow(-1);

????? td = tr.insertCell(-1);

19、我們常常設置表格寬度和高度少于20px時，往往在FF里沒有效果：

Not Compatible:

?

Compatible:

?

20、在IE里插入空白行時不會顯示，但在FF里會顯示出來

Not Compatible:

sbdTempHtml.Append("

");

sbdTempHtml.Append("

");

?

Compatible:

sbdTempHtml.Append(" ");

21、在IE里document.mainform.elements[“…”]可以取到對象，但FF不行:

Not Compatible:

document.mainform.elements[“imgID”]

Compatible

document.getElementById(“imgID”)

22、FF里有textContent屬性，但IE只有innerText

Not Compatible:

div.innerText

Compatible

if(windows.isIE)

{div.innerText}

else

{div.textContent}

23、在IE，attachEvent可以正常使用，但FF里有時不行，比如在iframe里:

Not Compatible:

obj.contentWindow.document.attachEvent("onkeyup", function(){updateCharCount(obj.id);});

Compatible

if(windows.isIE)

{

????obj.contentWindow.document.attachEvent("onkeyup", function(){updateCharCount(obj.id);});

}

else

{

obj.contentWindow.document.addEventListener("keyup", function(){updateCharCount(obj.id);},false);

}

24、runtimeStyle不支持，應改為style

25、window.execScript?不支持

var jsCode = "var a = 1;"; ????? if (window.execScript) { ?????????????? window.execScript(jsCode, "JavaScript"); ????? } else { ?????????????? window.eval_r(jsCode); ????? }

?

26、obj.style.display=”block”不支持，應為obj.style.display=””

27、document.createElement_x在FF和Safari里不支持直接傳入HTML,如:

Not Compatible:

document.createElement_x("");

Compatible

var?iframeObj = (document.all)?document.createElement_x(""):document.createElement_x('iframe');

??????? iframeObj.name="iframe1";

??????? iframeObj.id="iframe1";

??????? iframeObj.width=0;

??????? iframeObj.height=0;

????????document.body.appendChild(iframeObj);

28、在Ipad Safari里，不支持滾動條overflow.

29、在Ipad Safari里,不支持下載

if?(!navigator.userAgent.match(/iPad/i)) {

Not Compatible:

f.src=url;

}

????????else

??????? {??????

???????Compatible

window.open(url);

????????}

?

更多詳細請google文章: Jscript Deviations from ES3

?

IE8里的64個BUG:

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

7?????????常見JavaScript兼容性問題

集合類對象問題

現有代碼中存在許多?document.form.item("itemName")?這樣的語句，不能在?FF?下運行

解決方法：

改用?document.form.elements["elementName"]

說明:IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象.

解決方法:統一使用[]獲取集合類對象.

?

window.event

現有問題：

使用?window.event?無法在?FF?上運行

解決方法：

FF?的?event?只能在事件發生的現場使用，此問題暫無法解決。可以這樣變通：

原代碼(可在IE中運行)：

提交" οnclick="javascript:gotoSubmit()"/>

??? function gotoSubmit() {

?????? alert(window.event);??? // use window.event

??? }

?

新代碼(可在IE和FF中運行)：

提交" οnclick="javascript:gotoSubmit(event)"/>

?? function gotoSubmit(e) {

????? e = e? e : (window.event ? window.event : null);

????? alert(e);???????????

?}

?

此外，如果新代碼中第一行不改，與老代碼一樣的話（即?gotoSubmit?調用沒有給參數），則仍然只能在IE中運行，但不會出錯。所以，這種方案?tpl?部分仍與老代碼兼容。

?

HTML?對象的?id?作為對象名的問題

現有問題：

在?IE?中，HTML?對象的?ID?可以作為?document?的下屬對象變量名直接使用。在?FF?中不能。

解決方法：

用?getElementById("idName")?代替?idName?作為對象變量使用。

用idName字符串取得對象的問題

現有問題：

在IE中，利用?eval_r(idName)?可以取得?id?為?idName?的?HTML?對象，在FF?中不能。

解決方法：

用?getElementById(idName)?代替?eval_r(idName)。

?

變量名與某?HTML?對象?id?相同的問題

現有問題：

在?FF?中，因為對象?id?不作為?HTML?對象的名稱，所以可以使用與?HTML?對象?id?相同的變量名，IE?中不能。

解決方法：

在聲明變量時，一律加上?var?，以避免歧義，這樣在?IE?中亦可正常運行。

此外，最好不要取與?HTML?對象?id?相同的變量名，以減少錯誤。

?

event.x?與?event.y?問題

現有問題：

在IE?中，event?對象有?x, y?屬性，FF中沒有。

解決方法：

在FF中，與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

其它：

event.layerX?在?IE?與?FF?中都有，具體意義有無差別尚未試驗。

?

關于frame

現有問題：

在?IE中?可以用window.testFrame取得該frame，FF中不行

解決方法：

在frame的使用方面FF和ie的最主要的區別是：

如果在frame標簽中書寫了以下屬性：

?

?style="display: block;"?src="/ clear.gif"/>

總結

以上是生活随笔為你收集整理的各大浏览器兼容性报告的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。