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

登陆条：loginbar

搜索：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不支持