IE、FF、Safari、OP不一樣瀏覽器兼容報告
1 瀏覽器內核簡介
| Tridentjavascript |
IE瀏覽器(GreenBrowser綠色瀏覽器, 遨遊瀏覽器....都是IE)css |
| Geckoshtml |
FireFox前端 |
| Prestojava |
Operanode |
| Webkitcss3 |
Safari、Chrome程序員 |
瀏覽器最重要或者說核心的部分是「Rendering Engine」，可大概譯爲「解釋引擎」，不過咱們通常習慣將之稱爲「瀏覽器內核」。負責對網頁語法的解釋（如HTML、JavaScript）並渲染（顯示）網頁。web
因此，一般所謂的瀏覽器內核也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不一樣的瀏覽器內核對網頁編寫語 法的解釋也有不一樣，所以同一網頁在不一樣的內核的瀏覽器裏的渲染（顯示）效果也可能不一樣，這也是網頁編寫者須要在不一樣內核的瀏覽器中測試網頁顯示效果的原 因。chrome
瀏覽器內核不少，若是加上全部的幾乎沒有什麼人在用的非商業的免費內核，那麼可能大約有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.(注意寫法.記得該聲明位置須要提早.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE7對FireFox
*+html 與 *html 是IE特有的標籤, firefox 暫不支持.而*+html 又爲 IE7特有標籤.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
}
</style>
注意:*+html 對IE7的HACK 必須保證HTML頂部有以下聲明：
<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」 」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 的傻瓜式解決技巧
注意是技巧，不是方法：
寫好標準頭
<!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">
高儘可能用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%，除非設定一個寬度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是塊元素的例子
display:inline 就是將元素顯示爲行內元素，元素的特色是：
和其餘元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 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; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那麼在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> 放到 <body> 標籤下，而後爲div指定一個類：
而後CSS這樣設計：
#container{ min-width: 600px; width:expression(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代碼<div id=」box」> <div id=」left」></div> <div id=」right」></div></div>
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 時。
例：
<div id=」box」>
<p>p對象中的內容</p>
</div>
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、IE六、IE7都支持 *，但IE8終於迴歸正統，放棄了對*的支持
2、IE七、IE八、Firefox、Opera、Safari都支持 important
顧名，important的優先級要高. 舉例說明：
<style type=」text/css」>
body
{
background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
</style>
IE6選擇最後一個，即：background-color:#000000; （由於IE6對important不感冒）
IE7選擇第二個，即：background-color:#000000;（由於IE7開始對important感冒了，同時還死守着它對 * 感情的最後一版本，但important並未起到優先級的做用）
IE8和Firefox、Opera、Safari選擇第一個，即：background-color:#FF0000 !important;（IE8徹底感冒於important，同時丟棄了對*的感情）
另外再補充一個，下劃線」_「,
IE6支持下劃線，IE七、IE8和Firefox、Opera、Safari均不支持下劃線。
3.6 其餘說明：
一、 若是你的頁面對IE7兼容沒有問題，又不想大量修改現有代碼，同時又能在IE8中正常使用，微軟聲稱，開發商僅須要在目前兼容IE7的網站上添加一行代碼便可解決問題，此代碼以下：
<meta http-equiv="x-ua-compatible" content="ie=7" />
2、body:nth-of-type(1) 若是這樣寫，表示全局查找body，將會對應第一個<body>。
3、還有其餘寫法，好比：
*html #test{}或者 *+html #test{}
4、*+html 對IE7的hack 必須保證HTML頂部有以下聲明：
http://www.w3.org/TR/html4/loose.dtd
二、 順序：Firefox、IE8、IE7、IE6依次排列。
三、 下面是補充：
複製代碼代碼以下:
selector{
property:value;
property:value\9;
+property:value;
_property:value;
}
固然，注意順序。根據CSS的優先性，上面的寫法，分別針對Firefox、IE8、IE7和IE6顯示值。讓咱們看看這個演示：
<!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>演示: 區分 IE6 / IE7 /IE8 /Firefox</title>
</head>
<style type="text/css" media="screen">
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;
color:blue;
color:brown\9;
+color:red;
_color:green;
}
</style>
<body style="width:500px;margin:0 auto;">
<p class="ie">
<span style="display:block;display:none\9;">嘿嘿，小子居然也用Firefox，藍色文字。</span>
<!--[if IE 8]>不錯不錯，挺先進的嘛，使用IE8呢！文字是褐色的。<![endif]-->
<!--[if IE 7]>你，IE7，紅色文字！<![endif]-->
<!--[if IE 6]>孩子，雖然顯示的是綠色文字，不過，IE6可不是好東西呢！<![endif]-->
</p>
</body>
</html>
提示：您能夠先修改部分代碼再運行
演示的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中這個段落是這樣寫的：
複製代碼代碼以下:
<p class="ie">
<span style="display:block;display:none\9;">嘿嘿，小子居然也用Firefox，藍色文字。</span>
<!--[if IE 8]>不錯不錯，挺先進的嘛，使用IE8呢！文字是褐色的。<![endif]-->
<!--[if IE 7]>你，IE7，紅色文字！<![endif]-->
<!--[if IE 6]>孩子，雖然顯示的是綠色文字，不過，IE6可不是好東西呢！<![endif]-->
</p>
對，就是IE條件註釋+CSS的結果。順路學一下IE條件註釋吧。不用再舉例了吧，一看就知道那個對那個了。
display:block;//這個必定要加！！！
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
CSS Hack 雖好且方便兼容各瀏覽器，可是通不過 W3C 驗證，因此還得本身權衡是否有必要去使用。
4 十個很是實用的CSS屬性 但IE不支持
1、Outline
在調試CSS問題的時候，我經常在指定元素上添加border來精確的查看該 元素會發生什麼並幫助肯定問題的來源。這經常是有效的，由於它能夠在布 局上給我更加具體的可視性。可是若是是塊級元素，這可能會發生某些錯誤——在任何 塊級元素上添加1px的邊框極可能會影響到佈局，它會讓這個元素的寬度額 外增長2px。
outline 屬性是完美的替代者，由於它能夠在不影響文檔流的狀況下呈現該對象。可是IE6 和IE7 不支持 outline 屬性，因此，它不能在這兩個瀏覽器中用於調試。
2、Inherit (值)
在CSS開發中有不少這樣的例子：經過在特定元素上設置某些樣式來告訴該元素來「繼承」它父級元素的全部已添加的屬性，這樣你就能夠避免至關多的鍵盤輸入。
這能夠經過設置 inherit 來很容易的實現。這可能頗有用。好比，當重寫 background 屬性的時候，經常會有不少的文字在該屬性中(色 彩、圖片的URL地址、位置等)。因此，與其從新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同 的背景屬性，一個 inherit 值就能夠 搞定一切——這顯然大大的節省了鍵盤輸入。
不幸的是， inherit 值在IE6和IE7不被支持（除了用於 direction (文字方向) 和 visibility 屬性）。
某人說，代碼就像女人的裙子——越短越好，看來IE會阻礙咱們這個願望的實現。
3、Empty-Cells
該屬性只用於table或者」display」屬性被設置爲」table-cell」的元素。若是你動態的爲一個table添加內容，就可能會遇到某個單元格的內容爲空的狀況，而後你又不但願這個空的單元格的邊框、背景色、背景圖片等隱藏掉。
使用」empty-cells: hide」就能解決這個問題，它會將可能出現這種狀況的單元格徹底隱藏掉。
Internet Explorer 不支持empty-cells屬性。
4、Caption-Side
說到table 的屬性，這個屬性用於聲明顯示在表格的側欄的表格標題。它接受 top 、 bottom 、 left 和 right 四個值。Internet Exporer 不支持這個屬性，table的標題在IE6和IE7中將老是出如今表格的頂部。
5、Counter-Increment / Counter-Reset
有序列表(<ol>)很是方便，由於它能夠省去你手工添加遞增數字的麻煩，並且它容許你不用更改數字就能改變列表的序列。
CSS 擁有 counter-increment 和 counter-reset 屬性，它容許你用來自動生成遞增數字到幾乎全部的HTML元素上，就像有序列表的效果同樣。
這裏有個示例：
Example Source Code [www.52css.com]
h2 {counter-increment: headers;}
h2:before {content: counter(headers) ". ";}
上面的樣式將在全部的 <h2> 標籤前面自動添加遞增的數字，並且容許你在h2標籤上實現和li標籤一樣的的效果。
可是IE6, IE7 甚至Safari(直到3.x版本)還不支持這些屬性。固然，IE6也不支持:before 僞元素。
6、Min-Height
有時，一個網站的設計或佈局結構須要一個有固定高度的內容區域，不然特定的視覺效果就會丟掉。這可能會由於一個漸變背景、一個獨特的下拉列表、 或者多是由於PS出來的很酷的發光效果。可是有的時候，頁面中的內容會比較多，而頁面卻不能像預期那樣展開。
這個時候就須要用到 min-height 屬性了，由於它能夠告訴瀏覽器在一個特定的塊級元素上渲染最小的高度，無論內容的實際高度是否達到了這個最小高度。而後呢，若是內容超出了最小高度，該元素就會適度的擴展開。
使用min-height 惟一須要注意到的是它在IE6中不被支持。咱們都知道IE6在（緩慢的）退出歷史舞臺，可是有的客戶可能仍然要求他們的網站支持這個該死的瀏覽器。
不過使人高興的是，IE6 渲染 height 的值的方法正好和其它瀏覽器渲染「min-height」的方式同樣，因此你只須要一個針對IE6的hack或獨立的樣式表來爲該元素添加特定的 height ，這個問題就解決了。
IE6 一樣無視 min-width 、 max-height 和 max-width ， 可是上述方法在這些屬性上也是可行的。
7、:hover
從技術上來講，:hover只是一個僞類，可是它在IE6中不被支持（IE7和IE8支持）。:hover僞類容許你在元素上添加任何的鼠標通過樣式。這很是有用，能夠避免(至少在某種程度上)使用JavaScript。
可是若是你的網站，須要徹底支持IE6，特別是在中國這種IE6一手遮天的狀況下，那麼你就必須考慮取消使用這個僞類，除非相關的標籤有個」href」屬性，好比<a>標籤。並且若是要實現這種效果，可能必須藉助於javascript和額外的樣式。
8、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驗證，由於語句沒有用逗號隔開。
10、: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("<input type=\"text\" name=\"" + str1 + "\" value=\"0\">");
Compatible:
tmpHtml.Append("<input type=\"text\" name=\"" + str1 + "\" id=\"" + str1 + "\" value=\"0\">");
3、不要用eval,而改成getElementById,eval在IE下能夠使用，但FF裏有時不支持或轉換出錯:
Not compatible:
objField1 = eval("document.mainform.meritid" + i);
Compatible:
objField1 = document.getElementById("meritid" + i);(always could not get the object).
四、 表格操做,改aRow(i).cells爲aRows[i].cells
Not compatible:
aRows(i).cells
Compatible:
aRows[i].cells
五、 自定義屬性使用標準get或set獲取和設置:
Not compatible:
var str = Obj.customizedvalue;
Compatible:
var str = Obj.getAttribute(「customizedvalue」);
var str = Obj.setAttribute(「customizedvalue」);
六、 移除select控件時，使用:
Not compatible:
oSel.options.remove(oSel.selectedIndex);
Compatible:
oSel.remove(oSel.selectedIndex);
七、 FF樣式不支持expression表達式，改用JS方法;
Not compatible:
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
width:expression(document.getElementById('CenterDIV').offsetWidth-16+'px');
Compatible:
改用JS方法;
八、 FF不支持onmouseleave事件，改用onmouseout事件:
Not compatible:
div.attachEvent("onmouseleave",new Function("clearPopUpMenu();"));
Compatible:
If(window.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.GetElementById(strObjId).style.width = 10;
Compatible:
document.GetElementById(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("<img src=\"../Graphics/i_expand.gif\" /></div>");
Compatible:
sbdTempHtml.Append("<img alt=\"\" title=\"\" src=\"../Graphics/i_expand.gif\" /></div>");
15、在tr裏,FF不支持「display:block」
Not compatible:
document.getElementById("hrmtr").style.display = "block";
Compatible:
document.getElementById("hrmtr").style.display = "";
16、FF使用濾鏡功能時,要設置透明度
Not compatible:
filter:alpha(opacity=50);
Compatible:
filter:alpha(opacity=50);
-moz-opacity:0.5; /*css*/
/*The way in js*/
if (!window.isIE)
obj.style.MozOpacity = 0.5;
17、全選
在IE裏咱們能夠用 「objInput.select()」 選中textbox裏的值. 但在FF只能用focus().
Compatible:
if ( window.isIE )
{
document.mainform.elements[checkCategory].select();
}
else
{
document.getElementById(「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:
<tr bgcolor="#000000"><td colspan="3"><img height="1" width="1" src="/clear.gif"/></td></tr>
Compatible:
<tr bgcolor="#000000"><td colspan="3"><img height="1px" width="1px" style="display: block;" src="/ clear.gif"/></td></tr>
20、在IE裏插入空白行時不會顯示，但在FF裏會顯示出來
Not Compatible:
sbdTempHtml.Append("<tr>");
sbdTempHtml.Append("</tr>");
Compatible:
sbdTempHtml.Append("<!--[if gte IE 6 & lte IE 7]>");
sbdTempHtml.Append("<tr>");
sbdTempHtml.Append("</tr>");
sbdTempHtml.Append("<![endif]-->");
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(window.isIE)
{div.innerText}
else
{div.textContent}
23、在IE，attachEvent能夠正常使用，但FF裏有時不行，好比在iframe裏:
Not Compatible:
obj.contentWindow.document.attachEvent("onkeyup", function(){updateCharCount(obj.id);});
Compatible
if(window.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(jsCode);
}
26、obj.style.display=」block」不支持，應爲obj.style.display=」」
27、document.createElement在FF和Safari裏不支持直接傳入HTML,如:
Not Compatible:
document.createElement("<iframe id=iframe1 name=iframe1 width=0 height=0></iframe>");
Compatible
var iframeObj = (document.all)?document.createElement("<iframe id=iframe1 name=iframe1 width=0 height=0></iframe>"):document.createElement('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中運行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
<script language="javascript">
function gotoSubmit() {
alert(window.event); // use window.event
}
</script>
新代碼(可在IE和FF中運行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
<script language="javascript">
function gotoSubmit(e) {
e = e? e : (window.event ? window.event : null);
alert(e);
}
</script>
此外，若是新代碼中第一行不改，與老代碼同樣的話（即 gotoSubmit 調用沒有給參數），則仍然只能在IE中運行，但不會出錯。因此，這種方案 tpl 部分仍與老代碼兼容。
HTML 對象的 id 做爲對象名的問題
現有問題：
在 IE 中，HTML 對象的 ID 能夠做爲 document 的下屬對象變量名直接使用。在 FF 中不能。
解決方法：
用 getElementById("idName") 代替 idName 做爲對象變量使用。
用idName字符串取得對象的問題
現有問題：
在IE中，利用 eval(idName) 能夠取得 id 爲 idName 的 HTML 對象，在FF 中不能。
解決方法：
用 getElementById(idName) 代替 eval(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標籤中書寫了如下屬性：
<frame src="/xx.htm" id="frameId" name="frameName" />
那麼ie能夠經過id或者name訪問這個frame對應的window對象
而FF只能夠經過name來訪問這個frame對應的window對象
例如若是上述frame標籤寫在最上層的window裏面的htm裏面，那麼能夠這樣訪問
IE： window.top.frameId或者window.top.frameName來訪問這個window對象
FF： 只能這樣window.top.frameName來訪問這個window對象
另外，在FF和ie中均可以使用window.top.document.getElementById("frameId")來訪問frame標籤
而且能夠經過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內容
也均可以經過window.top.frameName.location = 'xx.htm'來切換frame的內容
父結點的問題
在FF中沒有 parentElement parentElement.children 而用 parentNode parentNode.childNodes
childNodes的下標的含義在IE和FF中不一樣，FF使用DOM規範，childNodes中會插入空白文本節點。
通常能夠經過node.getElementsByTagName()來回避這個問題。當html中節點缺失時，IE和FF對parentNode的解釋不一樣，例如
<form>
<table>
<input/>
</table>
</form>
FF中input.parentNode的值爲form, 而IE中input.parentNode的值爲空節點
FF中節點沒有removeNode方法，必須使用以下方法 node.parentNode.removeChild(node)
const 問題
現有問題：
在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
解決方法：
不使用 const ，以 var 代替。
body 對象
FF的body在body標籤沒有被瀏覽器徹底讀入以前就存在，而IE則必須在body徹底被讀入以後才存在
URLencoding
在js中若是書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那麼頗有可能url不會被正常顯示以致於參數沒有正確的傳到服務器
通常會服務器報錯參數沒有找到
固然若是是在tpl中例外，由於tpl中符合xml規範，要求&書寫爲&
通常FF沒法識別js中的&
nodeName 和 tagName 問題
現有問題：
在FF中，全部節點均有 nodeName 值，但 textNode 沒有 tagName 值。在 IE 中，nodeName 的使用好象有問題
解決方法：
使用 tagName，但應檢測其是否爲空。
元素屬性
IE下 input.type屬性爲只讀，可是FF下能夠修改
document.getElementsByName() 和 document.all[name] 的問題
在 IE 中，getElementsByName()、document.all[name] 均不能用來取得多個具備相同name的div 元素集合。
兼容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;
});
}
自定義屬性問題
說明:IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,也能夠使用getAttribute()獲取自定義屬性;FF下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一經過getAttribute()獲取自定義屬性.
event.srcElement問題
說明:IE下,even對象有srcElement屬性,可是沒有target屬性;Firefox下,even對象有target屬性,可是沒有srcElement屬性.
解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target.
window.location.href問題
說明:IE或者Firefox2.0.x下,能夠使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解決方法:使用window.location來代替window.location.href.
模態和非模態窗口問題
說明:IE下,能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.
解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口
如 果須要將子窗口中的參數傳遞迴父窗口,能夠在子窗口中使用window.opener來訪問父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
事件委託方法
IE：document.body.onload = inject; //Function inject()在這以前已被實現
FF：document.body.onload = inject();
若是要加傳遞參數，能夠作個閉包
(function(arg){
document.body.onload=function(){inject(arg);};
})(arg)
innerText在IE中能正常工做，可是innerText在FireFox中卻不行.
解決方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
FF中相似 obj.style.height = imgObj.height 的語句無效
解決方法：
obj.style.height = imgObj.height + 'px';
IE,FF以及其它瀏覽器對於 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);
8 手機及平板瀏覽器兼容測試結果
注意： 如下所說的「大多數」是指在咱們測試過的機型中，發生此類情況的手機佔比達50%及以上，「部分」爲 20%到50%；「少數」爲20%及如下。而這個機率也僅僅只限於咱們所測試過的機型，雖然咱們採集的樣本儘可能覆蓋各類特徵的手機，但並不表明全部手機的 狀況。
8.1.1.1 XHTML部分
大多數手機不支持的：
- 表單元素的「disable」屬性
部分手機不支持的：
- 「button」標籤
- 「input[type=file]「標籤
- 「iframe」標籤。
雖然只有部分 手機不支持這幾個標籤，但由於這些標籤在頁面中每每具備很是重要的功能，因此屬於高危標籤，要謹慎使用。
少數手機不支持的：
- 「select」標籤：該標籤若是被賦予比較複雜的CSS屬性，可能會致使顯示不正常，好比」vertical-align:middle」。
8.1.1.2 CSS部分
大部分手機不支持的：
- 「font-family」屬性：由於手機基本上只安裝了宋體這一種中文字體；
- 「font-family:bold;」：對中文字符無效，但通常對英文字符是有效的；
- 「font-style: italic;」：同上；
- 「font-size」屬性：好比12px的中文和14px的中文看起來同樣大，當字符大小爲18px的時候你也許能看出來一些區別；
- 「white-space/word-wrap」屬性：沒法設置強制換行，因此當你網頁有不少中文的時候，須要特別關注不要讓過多連寫的英文字符 撐開頁面；
- 「background-position」屬性：但背景圖片的其餘屬性設定是支持的；
- 「position」屬性；
- 「overflow」屬性；
- 「display」屬性；
- 「min-height」和」min-weidth」屬性；
部分手機不支持的：
- 「height」屬性：對」height」的支持不太好，奇怪的是在咱們的測試當中，僅僅只有不多部分手機不支持」width」屬性；
- 「pading」屬性
- 「margin」屬性：更高比例的手機不支持」margin」的負值。
少數手機不支持的：
- 少數手機對CSS徹底不支持；
8.1.1.3 JavaScript部分
這部分測試相對不那麼讓人抓狂，要麼乾脆不支持，若是支持的話，對基本的dom操做、事 件等支持度都還不錯。但咱們沒有測試過很複雜的腳本。
在咱們測試過的手機當中，支持（包括不徹底支持）JavaScript的手機比例大約在一半左右，固然，對於咱們來講，最重要的不是這個比例，而是要如何作好JavaScript的優雅降級。
8.1.1.4 其餘
· 部分手機不支持png8和png24，因此儘可能使用jpg和gif的圖片
· 另外對於平滑的漸變等精細的圖片細節，部分手機的色彩支持度並不能達到要求，因此慎用有平滑漸變的bar設計
· 部分手機對於超大圖片，既不進行縮放，也不顯示橫下滾動條
· 少數手機在打開超過20k的測試頁面時，會顯示內存不足
8.1.2 開發中你須要注意的問題
1. 手機網頁編碼須要遵循什麼規範？
遵循XHTML Mobile Profile規範（WAP-277-XHTMLMP-20011029-a.pdf ）， 簡稱爲XHTML MP，也就是一般說的WAP2.0規範。 XHTML MP是爲不支持XHTML的所有特性且資源有限的客戶端所設計的。它以XHTML Basic爲基礎，加入了一些來自XHTML 1.0的元素和屬性。這些內容包括一些其餘元素和對內部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴格的XHTML 1.0子集。
2. 網頁文檔推薦使用擴展名？
推薦命名爲xhtml，按WAP2.0的規範標準寫成html/htm等也是能夠的。但少數手機對html支持的很差。
3. 爲何現今大多數的網站一行字數上限爲14箇中文字符？
因爲手持設備的特殊性，其頁面中實際文字大小未必是咱們在CSS中設定的文字大小，尤爲是在第三方瀏覽器中。例如Nokia5310，其內置瀏覽器 頁面內文字大小與CSS設定相符，可是第三方瀏覽器OperaMini與UCWEB頁面內文字大小卻大於CSS設定。經測試，其文本大概在16px左右。 假如屏幕分辨率寬度爲240px，去除外邊距，那麼其一行顯示14個字之內，是比較保險（避免文本換行）的作法。
4. 使用WCSS仍是CSS？
WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適於移動互聯網特性的屬性，並加入一些具備WAP特性的擴展（如-wap- input-format/-wap-input-required/display:-wap-marquee等）。 須要留意的是，這些特殊的屬性擴展並非很實用，因此在實際的項目開發當中，不推薦使用WCSS特有的屬性。
5. 避免空值屬性
若是屬性值爲空，在web頁面中是徹底沒有問題的，可是在大部分手機網頁上會報錯。
6. 網頁大小限制
建議低版本頁面不超過15k，高版本頁面不超過60k。
7. 用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是否是靠譜？
有條件的話，咱們固然建議在手機實體上進行測試，由於目標客戶羣的手機設備老是在不斷變化的，這些手機模擬器一般不能徹底正確的模擬頁面在手機上的顯示情況，好比圖片色彩，頁面大小限制等就很難再模擬器上測試出來。固然，一些第三方手機瀏覽器的在線模擬器仍是能夠進行測試的，第三方瀏覽器相對來講受手機設 備的影響較小。
9 Javascript+HTML+CSS編碼規範
9.1 目標
爲提高公司在WEB開發中的前端腳本和樣式表編碼的規範性，提出了一些前端開發的基本準則。
9.2 準則
l WEB應用應儘可能減小使用服務器端控件，多采用JavaScript和客戶端控件或是AJAX方式實現功能。
l 公司產品中新開發的WEB項目所有使用公司JS框架－Jcore組件，公司承接的基於WEB的客戶項目也採用Jcore組件。對於客戶內部項目能夠在客戶本地服務器上部署一份Jcore服務
l 全部採用Jcore框架的項目，JS編碼和使用到的UI組件庫，若是Jcore核心庫或UI庫已經提供的，一概採用Jcore框架內提供的相關庫；若是Jcore框架還未提供的UI庫或是公共函數，能夠向Jcore開發組提出需求。
l 不容許在JS腳本中定義配置，應統一將配置定義在Web.Config中，以<%= %>形式引用。
l JavaScript對象命名使用Pascal命名約定，名稱中每一個單詞的首字母用大寫
變量和函數命名使用Camel命名約定，名稱中的第一個單詞小寫，從第二個單詞開始的首字母用大寫。
函數內部變量/不該由外部調用的函數使用Camel命名約定，名稱中的第一個單詞小寫，從第二個單詞開始的首字母用大寫，並以「_」做爲前綴。
l 每項目創建一個全局樣式表，名稱爲：main.css，其中存放全部通用樣式。
每項目按照業務功能的不一樣，可單獨定義其特定樣式文件存放。
一個項目中的樣式表文件不該過多，每一個頁面引用的樣式表文件通常應少於2個（包括2個）。
l 對於公司產品中的WEB項目樣式表，公司將提供幾種風格的皮膚庫，做爲公共樣式表，公共樣式表包含常見的頁面元素樣式，命名上所有以w_開頭，項目樣式表編寫規範參照CSS編碼規範。
l 對於終端調用的WEB應用，編寫的JavaScript和CSS須要知足IE6、IE7、IE8三個常見IE瀏覽器版本的兼容性。對於非終端調用的WEB應用，編寫的JavaScript和CSS須要知足IE6、IE7、IE8、FireFox2.0及以上版本瀏覽器的兼容性。
l 關於多語言支持的具體要求後續補充。
l 對於JavaScript和CSS在項目正式部署的時候，須要利用公司指定的JavaScript發佈工具對JavaScript和CSS文件進行代碼壓縮和自動去除註釋，以減小JavaScript和CSS文件大小，減輕網絡壓力和加快頁面加載速度。
9.3 JavaScript編碼規範
9.3.1 變量命名
1) 通常變量
l 全部的變量名使用英文名稱。
l 常量在對象（類）或者枚舉變量的前部聲明。
l 通用的變量必須使用與其名字一致的類型名稱：
setTopic(topic) // 變量 topic 爲 Topic 類型的變量
l 若是變量有其隱含的返回值，則避免使用其類似的方法：
getHandler(); // 避免使用 getEventHandler()
l 公有變量必須清楚的表達其自身的屬性，避免字義含糊不清，例如：
MouseEventHandler // 而非 MseEvtHdlr。
dojo.events.mouse.Handler // 而非 dojo.events.mouse.MouseEventHandler
2) 類變量
l 類的命名使用駱駝命名規則，例如： Account, EventHandler
l 類/構造函數，能夠使用擴展其基類的名稱命名，這樣能夠正確、迅速的找到其基類的名稱：
EventHandler UIEventHandler MouseEventHandler
l 私有變量，則前面添加下劃線。 this._somePrivateVariable = statement;
l 私有類的變量屬性成員使用混合名稱（mixedCase）命名，並前面下下劃線（_）。例如：
var MyClass = function()
{
var _buffer;
this.doSomething = function(){ };
}
l 方法的命令必須爲動詞或者是動詞短語： obj.getSomeValue()
3) 枚舉
l 枚舉變量的命名必需要有實際的意義，而且其成員 必須 使用駱駝命名規則或使用大寫：
var NodeTypes =
{
Element : 1,
DOCUMENT: 2
}
9.3.2 特殊命名規範
l 術語 "get/set" 不要和一個字段相連，除非它被定義爲私有變量。
l 前面加 "is" 的變量名 應該 爲布爾值，同理能夠爲 "has", "can" 或者 "should"。
l 術語 "compute" 做爲變量名應爲已經計算完成的變量。
l 術語 "find" 做爲變量名應爲已經查找完成的變量。
l 術語 "initialize" 或者 "init" 做爲變量名應爲已經實例化（初始化）完成的類或者其餘類型的變量。
l UI （用戶界面）控制變量應在名稱後加控制類型，例如： leftComboBox, topScrollPane。
l 帶有 "num" 或者 "count" 開頭的變量名約定爲數字（對象）。
l 重複變量建議使用 "i", "j", "k" （依次類推）等名稱的變量。
l 補充用語必須使用補充詞，例如： get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end, etc.
l 能縮寫的名稱儘可能使用縮寫。
l 避免產生歧義的布爾變量名稱，例如：
isNotError, isNotFound 爲非法錯誤類，建議在變量名稱後加上 "Exception" 或者 "Error"。
9.3.3 邏輯語句
1) IF 語句：
l 多行
if (someCondition){
statements;
}else if (someOtherCondition){
statements;
}else {
statements;
}
l 單行，也能夠這樣寫：
if (condition){ statement; }
2) FOR 語句 應該 看起來像這樣：
l 多行
for (initialization; condition; update){
statements;
}
l 單行，也能夠這樣寫：
for (intialization; condition; update){ statement; }
3) WHILE 語句 應該 看起來像這樣：
l 多行
while (!isDone) {
doSomething();
isDone = moreToDo();
}
l 單行，也能夠這樣寫：
while (condition){ statement; }
4) DO ... WHILE 語句 應該 看起來像這樣：
Do{
statements;
}
while (condition);
5) SWITCH 語句 應該 看起來像這樣：
switch (condition){
case ABC:
statements; // fallthrough
case DEF: statements;
break;
default:
statements;
break;
}
6) TRY ... CATCH 語句 應該 看起來像這樣：
try {
statements;
} catch(ex) {
statements;
} finally {
statements;
}
9.3.4 註釋
總結（summary）: 簡短的表述此函數或者對象實現的目的
描述（description）: 對於此函數或者類的簡短的描述
返回（return）: 描述此函數返回什麼（並不包括返回類型）
1) 基本函數信息
function(){
// summary: Soon we will have enough treasure to rule all of New Jersey.
// description: Or we could just get a new roomate.
// Look, you go find him. He don't yell at you.
// All I ever try to do is make him smile and sing around
// him and dance around him and he just lays into me.
// He told me to get in the freezer 'cause there was a carnival in there.
// returns: Look, a Bananarama tape!
}
2) 對象函數信息
{
// summary: Dingle, engage the rainbow machine!
// description:
// Tell you what, I wish I was--oh my g--that beam,
// coming up like that, the speed, you might wanna adjust that.
// It really did a number on my back, there. I mean, and I don't
// wanna say whiplash, just yet, cause that's a little too far,
// but, you're insured, right?
}
3) 參數
簡單類型 ：能夠直接在函數參數定義中註釋說明。
function(/*String*/ foo, /*int*/ bar)
可變類型參數
? ：可選參數 說面參數範圍不肯定
[] ：數組
function(/*String?*/ foo, /*int*/ bar, /*String[]*/ baz)
4) 變量
因爲實例變量、原型變量和外部變量的聲明是一致的，因此有不少的方法聲明、修改變量。具體的如何定義和定位應在變量最早出現的位置指明變量的名稱、類型、做用域等信息。
舉例：
function foo() {
// myString: String
// times: int
// How many times to print myString
// separator: String
// What to print out in between myString*
this.myString = "placeholder text";
this.times = 5;
}
foo.prototype.setString = function (myString){
this.myString = myString;
}
foo.prototype.toString = function() {
for(int i = 0; i < this.times; i++) {
dojo.debug(this.myString);
dojo.debug(foo.separator);
}
}
foo.separator = "=====";
5) 返回值
由於函數能夠同時返回多個不一樣（類型）的值，因此應每一個返回值以後加入返回類型的註釋。註釋在行內註釋便可，若是全部的返回值爲同一類型，則指明返回的類型；如爲多個不一樣的返回值，則標註返回類型爲"mixed"。
舉例：
function(){
if (arguments.length) {
return "You passed argument(s)"; // String
} else {
return false; // Boolean
}
}
6) 僞代碼
有時候您須要在函數或者類中添加對於此函數和類的功能性流程描述。若是您打算這樣作，您能夠使用 /*======== （= 字符最好出現 5 次或者更多），這樣作的好處就是能夠不用將這些東西加入代碼（譯註：原做者的意思可能爲代碼管理系統）。這樣看起來在 /*===== 和 =====*/ 會有很是長的一段註釋，等待功能調整完畢之後就能夠考慮是否刪除。
舉例：
/*=====
module.pseudo.kwArgs = {
// url: String
// The location of the file
url: "",
// mimeType: String
// text/html, text/xml, etc
mimeType: ""
}
=====*/
function(/*module.pseudo.kwArgs*/ kwArgs){
dojo.debug(kwArgs.url);
dojo.debug(kwArgs.mimeType);
}
9.4 HTML編碼規範
l 全部的xhtml代碼小寫
l 屬性的值必定要用雙引號("")括起來，且必定要有值
l 每一個標籤都要有開始和結束，且要有正確的層次
l 空元素要有結束的tag或於開始的tag後加上"/"
l 表現與結構徹底分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
l <h1>到<h5>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜索引擎的查詢。
l 給每個表格和表單加上一個惟一的、結構標記id
l 給重要的區塊加上註釋,如：
l 給圖片加上alt標籤
l 全部的標籤必須進行合理的嵌套
l 根元素前必須有元素，宣告使用那一種DTD
l XHTML1 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
l 根元素必須有xmlns屬性來指定使用http://www.w3.org/1999/xhtml的namespace
9.5 CSS編碼規範
l id和class命名採用該版塊的英文單詞或組合命名，並第一個單詞小寫，第二個單詞首個字母大寫，如：topBar
l CSS樣式表各區塊用註釋說明
l 儘可能使用英文命名原則
l 不用加中槓和下劃線
l 儘可能不縮寫，除非一看就明白的單詞
(1)頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
左右中：left right center
(2)導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3)功能
標誌：logo
廣告：banner
登錄：login
登陸條：loginbar
註冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
註釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合做夥伴：partner
友情連接：link
版權：copyright
9.6 註釋的寫法
/* Footer */
內容區
/* End Footer */
以上信息來自：
- 1. IE、FF、Safari、OP不一樣瀏覽器兼容報告
- 2. IE、FF、Safari、OP不一樣瀏覽器兼容報告[轉]
- 3. IE、FF、Safari、OP不同瀏覽器兼容報告
- 4. 各大瀏覽器兼容性報告 IE、FF、Safari、OP不一樣瀏覽器兼容報告
- 5. HTML5 兼容IE瀏覽器
- 6. IE瀏覽器不兼容indexOf()方法
- 7. IE瀏覽器不兼容indexOf問題
- 8. js的nextSibling,屬性兼容IE和FF等瀏覽器
- 9. 瀏覽器兼容之JavaScript篇——已在IE、FF、Chrome測試
- 10. window.url.createobjecturl 兼容多種瀏覽器（IE,google,360,Safari,firefox）
- 更多相關文章...
- • 蘋果 Safari 瀏覽器 - 瀏覽器信息
- • XSLT 瀏覽器 - XSLT 教程
- • Docker容器實戰(一) - 封神Server端技術
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. IE、FF、Safari、OP不一樣瀏覽器兼容報告
- 2. IE、FF、Safari、OP不一樣瀏覽器兼容報告[轉]
- 3. IE、FF、Safari、OP不同瀏覽器兼容報告
- 4. 各大瀏覽器兼容性報告 IE、FF、Safari、OP不一樣瀏覽器兼容報告
- 5. HTML5 兼容IE瀏覽器
- 6. IE瀏覽器不兼容indexOf()方法
- 7. IE瀏覽器不兼容indexOf問題
- 8. js的nextSibling,屬性兼容IE和FF等瀏覽器
- 9. 瀏覽器兼容之JavaScript篇——已在IE、FF、Chrome測試
- 10. window.url.createobjecturl 兼容多種瀏覽器（IE,google,360,Safari,firefox）