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的属性值后,分号前加 “ /” (斜杠 零 斜杠)
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.onclick=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.onclick=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)
}