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

時間 2019-11-19

原文原文鏈接

3 CSS區別及兼容

3.1 什麼是CSS hack？

因爲不一樣的瀏覽器，好比IE六、IE七、IE八、Firefox等，對CSS的解析認識不同，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。
　　這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。
　　這個針對不一樣的瀏覽器寫不一樣的CSS code的過程，就叫CSS hack，也叫寫CSS hack。javascript

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

3.2 各瀏覽器CSS hack兼容表：

IE6html

IE7前端

IE8java

Firefoxnode

Chromecss3

Safariweb

IE6express

IE7數組

IE8

Safari

!important

nth-of-type(1)

整理二: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">

高儘可能用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 { }
#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和*的支持

一、IE六、IE7都支持 *，但IE8終於迴歸正統，放棄了對*的支持
二、IE七、IE八、Firefox、Opera、Safari都支持 important

顧名，important的優先級要高. 舉例說明：
<style type=」text/css」>
body
{

*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
</style>

IE6選擇最後一個，即：（由於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" />
二、body:nth-of-type(1) 若是這樣寫，表示全局查找body，將會對應第一個<body>。
三、還有其餘寫法，好比：
*html #test{}或者 *+html #test{}
四、*+html 對IE7的hack 必須保證HTML頂部有以下聲明：
http://www.w3.org/TR/html4/loose.dtd

二、順序：Firefox、IE八、IE七、IE6依次排列。

三、下面是補充：

複製代碼代碼以下:
selector{
property:value;
property:value\9;
+property:value;
_property:value;
}

固然，注意順序。根據CSS的優先性，上面的寫法，分別針對Firefox、IE八、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>



</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>



</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下不兼容的方法

一、Dom操做

var wrongGet = obj.firstChild;

var wrongGet = obj.lastChild;

var wrongGet = obj.nextSibling;

var wrongGet = obj.childNodes;

var wrongGet = obj.previousSibling;

二、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\">");

三、不要用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();"));

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

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

十一、FF不支持document.body.scrollLeft

Not compatible:

var _left = document.body.scrollLeft;

Compatible:

var _left = document.documentElement.scrollLeft;

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

scrollHeight|scrollLeft|scrollTop|scrollWidth

十二、FF指定寬度或高度爲像素時要加」px」:

Not compatible:

document.GetElementById(strObjId).style.width = 10;

Compatible:

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

1三、style=」cursor:hand」應該爲 style=」cursor:pointer」

Not compatible:

style=」cursor:hand」

Compatible:

style=」cursor:pointer」

1四、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>");

1五、在tr裏,FF不支持「display:block」

Not compatible:

document.getElementById("hrmtr").style.display = "block";

Compatible:

document.getElementById("hrmtr").style.display = "";

1六、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;

1七、全選

在IE裏咱們能夠用「objInput.select()」選中textbox裏的值. 但在FF只能用focus().

Compatible:

if ( window.isIE )

{

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

}

else

{

document.getElementById(「checkCategory」).focus();

}

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

Not compatible:

tr = tab.insertRow();

td = tr.insertCell();

Compatible:

tr = tab.insertRow(-1);

td = tr.insertCell(-1);

1九、咱們經常設置表格寬度和高度少於20px時，每每在FF裏沒有效果：

Not Compatible:

Compatible:

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]-->");

2一、在IE裏document.mainform.elements[「…」]能夠取到對象，但FF不行:

Not Compatible:

document.mainform.elements[「imgID」]

Compatible

document.getElementById(「imgID」)

2二、FF裏有textContent屬性，但IE只有innerText

Not Compatible:

div.innerText

Compatible

if(window.isIE)

{div.innerText}

else

{div.textContent}

2三、在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);

}

2四、runtimeStyle不支持，應改成style

2五、window.execScript 不支持

var jsCode = "var a = 1;";

      if (window.execScript) {

               window.execScript(jsCode, "JavaScript");

      } else {

               window.eval(jsCode);

2六、obj.style.display=」block」不支持，應爲obj.style.display=」」

2七、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);

2八、在Ipad Safari裏，不支持滾動條overflow.

2九、在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中運行)：

function gotoSubmit() {

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

}

</script>

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

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標籤中書寫了如下屬性：

那麼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>

</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須要知足IE六、IE七、IE8三個常見IE瀏覽器版本的兼容性。對於非終端調用的WEB應用，編寫的JavaScript和CSS須要知足IE六、IE七、IE八、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 */

以上信息來源於：http://www.cnblogs.com/xiaopin/archive/2011/10/29/2228407.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

3 CSS區別及兼容

3.1 什麼是CSS hack？

3.2 各瀏覽器CSS hack兼容表：

3.3 CSS HACK

3.4 常見CSS兼容性問題

3.5 其餘兼容技巧

3.6 其餘說明：

4 十個很是實用的CSS屬性 但IE不支持

5 你須要熟知10個的CSS3屬性

6 JS兼容解決

7 常見JavaScript兼容性問題

8 手機及平板瀏覽器兼容測試結果

8.1.1.1 XHTML部分

8.1.1.2 CSS部分

8.1.1.3 JavaScript部分

8.1.1.4 其餘

8.1.2 開發中你須要注意的問題

9 Javascript+HTML+CSS編碼規範

9.1 目標

9.2 準則

9.3 JavaScript編碼規範

9.3.1 變量命名

9.3.2 特殊命名規範

9.3.3 邏輯語句

9.3.4 註釋

9.4 HTML編碼規範

9.5 CSS編碼規範

9.6 註釋的寫法

4 十個很是實用的CSS屬性但IE不支持