注意: html文件夹中有对应bug重现的html页面
最近发现项目方向越来越不对了，干脆用来放置浏览器的兼容性内容吧！
计算一定要精确 不要让内容的宽高超出我们设置的宽高 在IE6下，内容会撑开设置好的宽高
在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动
在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动
P标签中不要嵌套块元素
IE6下最小高度问题 在IE6下元素的高度的小于19px的时候，会被当做19px来处理
解决办法:overflow:hidden;
1px dotted 在IE6下不支持 ，因为精度计算的问题，会显示成虚线，2px或大于2px的dotted就可以正常显示
解决办法:切背景平铺
标准浏览器 解决子元素margin传递到父元素的bug
解决方法:
1.加float
2.overflow:hidden IE6下需要出发haslayout
在IE6下解决margin传递要触发haslayout
(如果有边框margin就不会传递到父元素上 在IE6下父级有边框的时候，子元素的margin值消失 解决办法:触发父级的haslayout ）
IE6下双边距BUG 在IE6，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍
解决办法: display:inline;
基于上面的bug
如果有一排浮动元素：
margin-right 一行右侧第一个元素有双边距
margin-left 一行左侧第一个元素有双边距
在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
解决办法:
1.给li加浮动
2.给li加vertical-align
在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙 4px
解决办法:
1.给li加浮动
2.给li加vertical-align
当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动
解决方法: 先解决最小高度 overflow:hidden; 在加float处理li间隙
当一行子元素占有的宽度之和和父级的宽度相差超过3px, 或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效
在IE6下的文字溢出BUG
子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素
解决办法:用div把注释或者内嵌元素用div包起来
当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
解决办法: 给定位元素外面包个div
在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素
解决办法: 给父级也加相对定位
在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差
解决方法: 不要给父元素设置奇数宽高
IE6下 不支持fixed定位方法，
解决方法: 通过js定位的方式
IE6下就不要给tr和tbody同时加背景样式
在IE6，7下输入类型的表单控件上下各有1px的间隙
解决办法: 给input加浮动
在IE6，7下输入类型的表单控件加border:none;
解决办法: 重置input的背景
在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动
解决办法: 把背景加给父级
IE6不支持png24图片
解决方法：
1.使用js （http://dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js）
2.使用filter
在IE6下 在important 后边在家一条同样的样式，会破坏掉important的作用，会按照默认的优先级顺序来走
IE6,7,8下，不加docType的话，页面盒模型出现怪异模式
childNodes 在标准浏览器中包含了文本（注意：换行会被解析成文本）和元素类型的节点，非标准的IE6,7,8下，只包含元素节点。
解决方法：
使用children属性替代childNodes， 只取元素节点
IE6,7,8不支持 firstElementChild, lastElementChild， nextElementSibling， previousElementSibling and parentElement
解决方法:
兼容写法 ofirst = ele.firstElementChild || firstChild, 但是这种写法会在下面的HTML结构情况（换行在标准浏览器下解析 成文本元素）下出问题
<!--注意下面ul中有换行 上面的方法在标准浏览器会拿到文本节点-->
<ul>
</ul>处理方法：
ele.children[0]
offsetParent 返回元素已定位的最近父级元素, 如果元素的所有父级元素都没有定位，则返回body
在IE6,7中会存在两种特殊情况：
- 如果当前元素没有定位默认是body，如果有定位则是html
- 如果当前元素的某个父级触发了hasLayout，那么offsetParent就会被指向到这个触发了hasLayout特性的父节点上
ele.currentStyle.hasLayoutHTML结构对dom的影响 例如：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<p></p>
</ul>上面的结构在IE6 7会将p元素解析成最后一个li元素的子元素，所以必须编写符合规范的HTML结构
元素.offsetLeft[Top] :
只读 属性 当前元素到定位父级的距离（偏移值）
到当前元素的offsetParent的距离
-
如果没有定位父级
- offsetParent -> body
- offsetLeft -> html
-
如果有定位父级
- ie7以下： * 如果自己没有定位，那么offsetLeft[Top]是到body的距离 * 如果自己有定位，那么就是到定位父级的距离
- 其他：到定位父级的距离
正常情况下是没有问题的：
- style.width : 样式宽
- clientWidth : 可视区宽 (样式宽 + padding) 注意滚动条情况下
- offsetWidth : 占位宽 (样式宽 + padding + border 可视区宽 + 边框)
怪异盒模型（未测试）
body.offsetLeft or body.offsetTop
- 标准浏览器 0
- IE6,7 body的margin值
标准浏览器支持 getElementsByClassName 方法 非标准浏览器不支持该方法
创建一个table: 兼容写法 注意运用:
- insertRow and insertCell
- tBodies, tHead, tFoot, rows and cells
解决方法：参见对应HTML页面
onchange事件，触发时机
- text文本输入框: 当光标离开元素的时候再去判断值是否发生了变化，如果发生了变化则触发onchange事件
- radio/checkbox:
- 标准下，点击，值如果改变就触发onchange事件
- 非标准下， 点击，并且焦点离开时，如果值发生改变，触发onchange事件
window.close()
- Firefox 无法关闭
- Chrome 立即关闭
- IE 询问是否关闭
注意: window.open() 不存在兼容问题, 该方法返回打开新窗口的window对象
可视区大小：
document.documentElement.clientWidth
document.documentElement.clientHeight滚动距离：
document.documentElement.scrollTop/scrollLeft //在chrome下这个值始终为0
document.body.scrollTop/scrollLeft兼容写法:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;内容高:
//下面在body margin为0情况下是一样的
document.body.scrollHeight
document.document.scrollHeight文档高度：
document.body.offsetHeight //所以推荐使用body.offsetHeight
document.documentElement.offsetHeight //IE下不兼容，始终显示可视高度event对象
- ie/chrome : event是一个内置全局对象
- 标准下 : 事件对象是通过事件函数的第一个参数传入
obj.onclick = function(evt) {
//兼容写法
var e = evt || window.event;
}注册事件:
- 非标准ie：obj.attachEvent(事件名称，事件函数);
- 没有捕获
- 事件名称有on
- 事件函数执行的顺序：标准ie ->正序 非标准ie ->倒序
- this指向window
- 标准：obj.addEventListener(事件名称，事件函数，是否捕获);
- 有捕获
- 事件名称没有on
- 事件执行的顺序是正序
- this触发该事件的对象
兼容写法:
function bind(obj, eventName, fn){
if (obj.addEventListener) {
obj.addEventListener(eventName, fn, false);
} else {
obj.attachEvent("on"+eventName, function(){
fn.call(obj);
});
}
}事件捕获
非标准ie不支持捕获 标准ie和标准浏览器addEventListener(eventName, fn, isCapture)
isCapture: false -> 冒泡 true -> 捕获
事件取消
- IE: detachEvent('on' + eventName, fn);
- 标准: removeEventListener(eventName, fn, isCapture);
兼容写法
function unBind(obj, eventName, fn){
if(obj.removeEventListener){
obj.removeEventListener(eventName, fn, false);
}else{
obj.detachEvent('on' + eventName, fn);
}
}全局捕获
设置全局捕获 ，当我们给一个元素设置全局捕获以后， 那么这个元素就会监听后续发生的所有事件， 当有事件发生的时候，就会被当前设置了全局捕获的元素所触发
- IE : 有，并且有效果
- FF : 有，但是没效果
- Chrome : 没有
getComputedStyle(object, false)
非标准IE,没有该方法，但是有object.currentStyle方法
function getStyle(object, attr){
return object.currentStyle ? object.currentStyle[attr] : getComputedStyle(object, false)[attr];
}
getStyle(document.body, "width");onmouseenter 和 onmouseleave 方法 IE下独有的事件，后来Chrome和Firefox加入该事件，用于处理onmouseover 和 onmouseout，子元素影响父元素问题
如果有新发现，请继续补充
http://w3help.org/zh-cn/causes/index.html http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201461824757380
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent