1.CSS常見bug
①雙外邊距浮動
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
body{
border: 1px solid orange;
height: 60px;
}
div#box{
margin-left: 10px;
background-color: #fab;
float: left;
display: inline;
}
p{
margin:20px;
background-color: teal;
}
</style>
</head>
<body>
<div id='box'>
<p>This is paragraph has 20px margin</p>
</div>
</body>
</html>②ie5,6的3像素文本偏移bug
p{
height:1%;
margin-left:0;
}
.myFloat{
margin-right:-3px;
}
//如果浮動元素時圖像
//ie 5.x
p{
height:1%;
margin-left:0;
}
img.myFloat{
margin:0 -3px;
}
//ie 6.x
p{
height:1%;
margin-left:0;
}
img.myFloat{
margin:0;
}③ie6重複字符
Description：一系列浮動元素的最後一個元素中最後幾個字符會在浮動元素下方重複。
Why：在這一系列浮動元素中，首尾元素之間存在多個註釋，y=2*(i-2),i>=2
Solution：從HTML中壓縮或刪除註釋。
④ie6“藏貓貓”bug
Description：某種情況下，文本”消失”了。
Why：內容出現在浮動元素的旁邊，而最後跟了一個清除的元素，實際上是隱藏於父元素的背景顏色或圖像之下，只有當刷新頁面時纔會重新出現。
Solution：①去掉父元素的背景或圖像。②爲防止清理元素與浮動元素接觸，將容器裏的元素應用特定的尺寸。③爲容器設定行高。④浮動和容器元素的position設置爲relative。
⑤相對容器中的絕對定位。
Description：絕對定位會按照視口進行定位，而非相對容器。
Solution：爲相對容器增加height:1%;
【參考：http://www.iyunlu.com/view/css-xhtml/55.html】
2.清除浮動(clear)還是閉合浮動(enclosing)？
from:http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
3.清除浮動的最佳方案：通過CSS加入一個能使用clear:both的媒介。—:after僞元素
好文章：【BFC神奇背後的原理】from：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
**【那些年我們一起清除過的浮動】from:http://www.iyunlu.com/view/css-xhtml/55.html
div.parent:after{
content:'.';//加入一個點
height: 0;//避免生成內容破壞原有佈局的高度，如圖
visibility: hidden;//隱藏掉該點
display: block;//使生成的元素（點）以塊級元素顯示，佔滿剩餘空間。
clear:both;//
}4.跨瀏覽器兼容
①
function getInnerText(element){
return (typeof element.textContent == 'string' ?
element.textContent : element.innerText);
}
function setInnerText(element,text){
if(typeof element.textContent == 'string'){
element.textContent = text;
}else{
element.innerText = text;
}
}②
function contains(refNode,otherNode){
if(typeof refNode.contains == 'function' && //ie
(!client.engine.webkit || client.engine.webkit >= 522)){
return refNode.contains('otherNode');
}else if(typeof.compareDocumentPosition(otherNode) == 'function'){ //DOM Level 3
return !!(refNode.compareDocumentPosition(otherNode) & 16);
}else{
var node = otherNode.parentNode;
do{
if(node===refNode){
return true;
}else{
node = node.parentNode;
}
}while(node != null)
return false;
}
}③
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){ //ie 9+
return element.msMatchesSelector(selector);
}else if(element.mozMacthesSelector){ //Firefox 3.6+
return element.mozMacthesSelector(selector);
}else if(element.webkitMacthesSelector){ //Safari 5+ Chrome
return element.webkitMacthesSelector(selector);
}else{
throw new Error('Not supported.');
}
}
if(matchesSelector(document.body,'body.page1')){
//do something
}④
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//冒泡階段---DOM Level 2
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type] = handler;
}
},
removeHandler:function(element,type,hander){
if(element.removeEventListener){
element.removeEventListener(type,hander,false);
}else if(detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type] = null;
}
},
getEvent:function(event){
return event ? event :window.event; //DOM Levl 0中event對象作爲window的一個屬性
},
getTarget:function(event){
return event.target || event.srcElement;//DOM ie
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault(); //DOM
}else{
event.returnValue = false; //ie
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation(); //DOM
}else{
event.cancelBubble == true;
}
}
};5.函數作用域
①定義在函數中的參數和變量在函數外部是不可見的，但在一個函數任意位置定義的變量，在該函數內部任何地方都可見。
②
var foo = function(){
var a = 3,b = 5;
var bar = function(){
var b=7,c=11;
//此時 a=3,b=7,c=11
a += b+c;
//此時 a=21,b=7,c=11
};
//此時 a=3,b=5,c未定義
bar();
//此時 a=21,b=5,c未定義
};③作用域的好處：內部函數可以訪問定義它們的外部函數的參數和變量（除this&arguments）。
6.閉包
var fade = function(node){
var level =1;
var step = function(){
var hex = level.toString(16);
node.style.backgroundColor = '#ffff' + hex +hex;
if(level < 15){
level += 1;
setTimeout(step,1000);
}
};
setTimeout(step,3000);//three two one yellow ------- white
}
fade(document.body);
var add_the_handlers = function(nodes){
var helper = function(i){ //輔助函數
return function(e){
alert(i);
}
}
var i;
for(i=0;i<nodes.length;i++){ //避免在循環中創建函數
nodes[i].onclick = helper(i);
}
};