浏览器常见bug以及修复。
1.双外边距浮动bug
最常见的bug是IE 6和更低版本中的双边距浮动bug，这个bug使任何浮动元素上的外边距加倍。
修复：display:inline
2. 3像素文本偏移bug
IE5和IE6上的bug，当文本与一个浮动元素相邻时，这个bug就会表现出来。例如将一个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左外边距。
.myFloat{
float:left;
width:200px;
}
p{
margin-left:200px;
}
如果这么做，在文本和浮动元素之间就会出现一个3像素的间隙。
修复：
p{
height:1%;
margin-left:0;
}
.myFloat{
margin-right:-3px;
}
3.IE6重复字符bug
在某些情况下，一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。
当在一系列浮动元素的第一个和最后一个元素之间有多个注释时，就会出现这个bug。前两个注释没有影响，但是在后续的每个注释会导致两个字符重复出现。所以，3个注释会导致连个重复字符，4个注释会导致4个重复字符，5个注释会导致6个重复字符。 这个bug似乎与前面的3像素bug有关。为了修复这个bug可以通过设置负的右边距从最后一个浮动元素上去掉3像素，或者使容器扩大3像素。但是，这两种方法可能在IE7中造成问题。
修复：从HTML中删除注释
4.IE6“藏猫猫”bug
一个浮动元素后面跟着一些非浮动元素，最后一个是清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。
修复：最容易的办法是去掉父元素的背景颜色或图像，但是，这常常是不可行的。另外一个办法是避免清理元素与浮动元素接触。如果容器元素应用了特定的尺寸，那么这个bug似乎就不会出现了。如果给元素指定行高，这个bug也不会出现。最后，将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。
5.相对容器中的绝对定位
IE6和更低版本在使用这个技术时会有许多bug。原因在于相对定位的元素没有获得IE的内部hasLayout属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对于视口进行定位。
修复：使相对定位的容器拥有布局，一种方法是在容器上显式设置width和height。在不知道高宽的情况下可以使用条件注释过滤IE5 IE6,为容器提供一个任意高度。
.container{
height：1%;
}
本文链接
假设我们用一个数组保存一组学生的基本信息。
[{name:"mike",age:17},
{name:"loren",age:16},
{name:"frank",age:18}];
现在，我们需要对这个数组按照姓名（name）字段进行升序排序，在这个场景内，使用数组的sort(compareFunction)方法进行排序，该方法的参数是一个比较函数。
比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个正数。
以下为按照name字段进行排序：
var value1=object1["name"];
var value2=object2["name"];
if(value1<value2){
return -1;
}else if(value1==value2){
return 0;
}else{
return 1;
}
};
studentsData.sort(compareFunctionByName);
结果：
frank
loren
mike
这样的排序写法简单有效，但是，如果此时需求发生变换，除了name外还需要对学生的age进行排序时，一般的做法是另外写一个按照age字段进行排序的比较函数，然后在调用的地方作个条件判断，决定使用哪一个版本的比较函数，如下。
var value1=object1["age"];
var value2=object2["age"];
if(value1<value2){
return -1;
}else if(value1==value2){
return 0;
}else{
return 1;
}
};
上面的写法工作的很好，但是两个版本的比较函数除了比较字段的不同外，其余部分均相同，如果又增加了对其他字段进行排序需求的话，代码的冗余度大大增加，而且代码会越来越丑陋。
当这种场景发生时，我们就需要用到js函数中一个非常有用的特性：将一个函数作为另一个函数的返回值。
具体作法，写一个生成函数，该生成函数根据字段名生成相应版本的比较函数，并将比较函数返回作为sort方法的参数。
如下：
return function(object1,object2){
var value1=object1[fieldName];
var value2=object2[fieldName];
if(value1<value2){
return -1;
}else if(value1==value2){
return 0;
}else{
return 1;
}
};
}
//按照name字段进行排序
studentsData.sort(createCompareFunction("name"));
//按照age字段进行排序
studentsData.sort(createCompareFunction("age"));
如此便解决了高冗余度的问题，并且通用性良好。
javascript函数的这一特性在实际中应用点很多，继续挖掘中。。。
^_^。
本文链接
伴随着html5和css3的成熟，页面展现的越来越绚丽越吸引人，尤其体现在各大网站的专题活动上。
现在写了一个简略的框框。
实现思想：
当滚动条滚动时，滚动到底部切换到下一屏，滚动到顶部时切换到上一屏。
点击按钮时滚动到对应的屏。
代码简略：
1、滚动条滚动方向，-1向下，1向上，注意：如用ie，请用ie9以上的浏览器看效果。
e = e || window.event;
if(!isFirefox){
direct = e.wheelDelta>0?-1:1;
}
else{
direct = e.detail<0?-1:1;
}
},false);
2、滚动到那一屏
rollH = $(this).scrollTop();
if(islock){
if((rollH===docH-winH) && (direct === 1 )){
num++;
if(num>5){
num = 5;
return;
}
if(!((num===5)||(num===0))){
islock = false;
}
running(num);
}
else if((rollH ===0)&&(direct === -1)){
num--;
if(num<0){
num = 0;
return;
}
if(!((num===5)||(num===0))){
islock = false;
}
running(num);
}
}
});
3、切换滚动，在切换那一时刻，将滚动条隐藏，结束后再显示。除了第一屏外，其他的屏都是距离顶端有1px距离。
test.animate({"left":"0px","top":"0px"},500,function(){
$(document).scrollTop(0);
setTimeout(function(){
islock=true;
$(document).scrollTop(1);
$("body").removeClass("bodyon");
},500);
});
运行代码
题