1. 清除浮动
在IE7 IE6的低版本中通过正常的方式不能解决float的问题
需在后面加 *zoom：1；来清除
2. 透明度
在IE8 及以下版本通过opacity 不能解决透明度的问题
需在后面加 filter:alpha(opacity=50); 来解决 （取值范围0-100）
3. 处理IE文本框的鼠标放上面会有蓝色外线的情况
outline:none;
4. 浏览器和浏览器是有差距的，这个差距是由浏览器自身的内核决定的
每个浏览器都有自己的前缀，主要是解决css3中的兼容问题（国内浏览器的内核都是谷歌）
chrome（谷歌）的前缀 -webkit-
Firefox（火狐）的前缀 -moz-
ie的前缀 -ms-
opera (欧朋) -o-
5. 还有属性的前缀 hack （处理ie低版本的兼容问题）
hack的两种写法 （在HTML中 和在css中）
在HTML中
<!--[if ite ie 8]> (意思是小于等于ie8才会出现 ， 针对ie版本)
内容
<![end if]--> （结束字符）
ie7 的写法 <!--[if it ie 8]
只有ie8才会出现 <!--[if ie 8] (如果是ie8以上的高版本则不需要)
csshack（ 值 hack 和 选择器 hack 两种）
值hack 特殊符号写在属性前
选择器hack 特殊符号写在选择器前面
值hack
ie6的hack为短杠或下划线 “-” “_” 列如 _background:green; 意思是ie6背景颜色为绿色
ie6、ie7同时兼容的hack 为“！”或者“+”
写法为 !background:green; 意思是ie6、ie7background为绿色
ie8 兼有的hack的属性值后，分号前加 “\0/” （斜杠 零 斜杠）
ie6、7、8、9、10兼有hack 属性之后，分号前加 “ \9 ” （斜杠9）
csshack中的 hack选择器
ie6专有 *div{ }
ie6、ie7同时专有 div,{ }
除了ie6，其他版本的兼容
HTML>body div{ }
ie6 不支持交集选择器
兼容：获取浏览器窗口可见区域的宽度；
ie6及以下不支持document.documentElement
所以兼容性的写法：
var w=document.documentElement.clientWidth||document.body.clientWidth
总结js解决兼容性的方法：
1. ||
var dd=document.documentElement.clientWidth||document.body.clientWidth
2. if() 条件语句；
if（window.getComputedStyle ==(另一种写法：window.getComputed.style in window)）{
css=window.getComputedStyle(aa,null)
}
else{
css=aa.currentStyle
}
console.log(css)
3.try{}catch(error){}
前提条件：必须在报错的条件下和if条件语句比较性能上比较差，不在万不得已的情况下，不能使用
案例：
var css;
try{
css=window.getComputedStyle()
}
catch（e){
css=aa.currentStyle
}
console.log(css)
本节点
没有获取的方法（无意义）
标准浏览器（ie8以上的高版本浏览器） 非标准浏览器（ie8以下的低版本浏览器）
标准浏览器会把文本节点也当成他的子节点
5.兼容性：
获取元素子节点的
元素.childNodes 这个属性有兼容性，标准浏览器会获取到文本节点，而低版本不会， 所以建议使用children这个属性 （这个属性：只读）
元素.children
获取单个子节点；
获取第一个子节点
标准浏览器下：元素.firstElementChild;
非标准浏览器下：元素.firstchild
兼容性写法：元素.firstElementChild||元素.firstchild
获取最后一个子节点：元素.lastElementChild
标准浏览器下：元素.lastElementChild
非标准浏览器下：元素.lastchild
兼容性写法：元素.lastElementChild||元素.lastchild
获取上一个节点： 元素.nextElementSibling
标准浏览器下：元素.nextElementSibling
非标准浏览器下：元素.nextsibling
兼容性写法：元素.nextElementSibling||元素.nextsibling
获取上一个子节点：元素.previousElementSibling
标准浏览器下：元素.previousElementSibling
非标准浏览器下：元素.previoussibling
兼容性写法：元素.previousElementSibling||元素.previoussibling
6.
案例：
<ul id="list">
<li></li>
<li></li>
</ul>
兼容性： 如果元素没有子节点，ie低版本读取不到，而标准浏览器会把文本节点当作子节点
list.children[0]
需要处理兼容 if 语句
if(list.children[0]){
list.insertBefore(li,list.children[0])
}
else{
list.appendChild(li)
}
7. event的兼容性
在chrome下event是undefined；
在ie低版本下是null ie低版本又称非标准流：主要是针对ie9以下的低版本
火狐下会报错
所以event的最终解决办法（写法）
document.οnclick=function(e){
var e=e||window.event
}
8.
事件绑定的第二种写法
标准浏览器用 addEventListener() 这个方法；
ie低版本用 attachEvent（） 这个方法；
addEventListener(参数1，参数2，参数3)
参数1，事件名 （去掉on）
参数2，事件函数
参数3，布尔值，代表捕获不捕获 默认false 不捕获但是冒泡
事件捕获（先触发父级，在触发子级）
1.ie低版本没有
2.普通事件绑定写法没有捕获
attachEvent() 和 addEventlistener() 两者的区别？
1. attachEvent 只用在IE8以下包括ie8；
addEventListener 只用在标准浏览器；
2.attachEvent 的事件名带on
addEventListener 事件名不带on
3.attachEvent 函数里面的this是window
addEventListener 函数里面的this是当前元素对象
4.attachEvent 只有冒泡，没有捕获
addEventListener 有冒泡也有捕获
9.
event兼容性：声明不一样
标准浏览器声明为undefined IE声明为null 火狐无法识别（会报错）
解决办法：
div.οnclick=function(ev){
var ev=ev||window.event
}
clientX和clientY的兼容性是鼠标离浏览器窗口左上角的坐标距离
pageX和pageY他是鼠标到网页（文档）左上角的距离坐标，但是IE低版本没有这个属性，在IE下怎么算pageY的值，用clientY+scrollTop
10.事件源，点击哪个元素，哪个元素就是事件源
事件源的兼容：
标准浏览器的事件源是ev.target ie低版本（5-8）不识别这个属性，但是ie有ev.srcElement这个属性和target差不多
11.阻止事件冒泡的兼容性（之前的版本有，现在没有了，仅供了解）
第一种：ie低版本的写法为event.cancelBubble=true; 标准浏览器的写法为：event.stoppropagation（现在标准浏览器也支持了event.cancel Bubble的写法）
他的兼容性写法为：event.stoppropargation?event.stopropagation:event.cancelBubble;
阻止事件默认行为的兼容性：
12.阻止事件默认行为的兼容性：
比如 a的href
href为空，会自动刷新页面
href为#， 锚点跳转
href为JavaScript：； 阻止默认行为的发生
（以上是a标签阻止浏览器的默认行为，但也有别的事件会有默认行为）
标准浏览器：
event.preventDefault()
ie低版本的写法：
event.retrunValue
兼容性的写法为event.preventDefault()?event.preventDefaulf():event.returnValue;
13.针对鼠标拖拽失灵的兼容性：
问题：在拖拽元素的时候，如果元素内部加了文字和图片，拖拽效果会失灵？
解决办法：
兼容性：
标准浏览器： 阻止事件的默认行为；
ie低版本：采取setcapture() 全局捕获的方法；（为ie低版本特有）
setcapture()给一个元素添加了这个方法之后，无论我们在页面的哪个地方触发相同事件，都会触发这个元素；
拖拽效果失灵的原因：
浏览器会给文字和图片一个默认行为，当文字或图片被选中的时候，会有一个拖拽的效果，即使没有人为给他添加，所以当我们点击这个元素拖拽时，有可能，选中文字或图片转移浏览器天生给的那个行为，从而导致，我们写的那个拖拽的效果失灵；
怎么去解决：
在onmousedown下
if(div.setCapture){
div.setCapture()
} //ie低版本下当我们点击元素的时候，浏览器会把元素身上事件，全部转移给div，阻碍了文字和图片被选中的行为
else{
ev.preventDefault?ev.preventDefault():ev.returnValue=false;
} //标准浏览器直接把浏览器自动选中图片和文字的默认行为取消了
但是ie低版本的setCapture()这个方法有很霸道的一面：会把所有跟他相同的事件都捕获到，执行自己的事件
所以要在鼠标抬起的时候，执行另一个方法；取消全局捕获releaseCapture;
if(div.releaseCapture){
div.releaseCapture
}
(适用于ie低版本)
14.dom2级兼容性写法；
dom2级事件写法；
标准：addEventListener(不带on事件名，函数名，false) this指向实例对象
ie低版本： attachEvent(事件名带on，函数名) this指向window
所以他们的兼容性写法
添加事件
function addEvent(elem, type, handle) {
if(elem.addEventListener) {
elem.addEventListener(type, handle, false);
}
else if(elem.attachEvent) {
elem.attachEvent('on' + type, function () {
handle.call(elem); //通过匿名函数可以把window的指向变成elem，但是移除事件的时候却不能移除他，这种写法就变成了，我把东西给了handle，移除时，我移除handle就可以了
}) //这是我的理解 （还有一种说法是，他的外部环境this指向window，我把他的外部环境的this指向变成当前实例，再去操作）
}
else{
elem['on' + type] = handle; // 通过这一步改变了他的this指向
}
}
addEvent(a,"click",fn)
function fn(){
console.log(this)
alert(111)
}
移除事件
function removeEvent(elem, type, handle) {
if(elem.removeEventListener) {
elem.removeEventListener(type, handle, false);
}
else if(elem.detachEvent) {
elem.detachachEvent('on' + type, function () {
handle.call(elem);
})
}
else{
elem['on' + type] = handle;
}
}
removeEvent(a,"click",fn)
function fn(){
console.log(this)
alert(111)
}
1935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
