浅谈：css样式、事件、dom在ie和chrome中的兼容性

一、css样式在浏览器中的兼容性：

1. css样式初始化：各个浏览器中都会有自带的边距：首先应对这个问题我们需要在css样式中写入：*｛margin：0；padding：0｝

2. 尽量使用这种书写格式 增强权重，让css样式在网页打开之后能够迅速执行，另一方面也起到一个精确设置css的作用

　　例：

 

我们想要设置li标签的话  通常 有人就会直接这样写  这样写是一种大忌 它会增加浏览器解析的压力，会减缓浏览器的加载速度

　　因为： 如果我们想要让两个ul下的li有相同格式也有不同的格式 如果用标签选择器的话 还需要精确选中设置各自的不同格式，推荐 使用后代选择器

 

　　既增强了权重加快了加载速度也精确选中了想要选中的元素 从而设置各自不同的属性

 

 

==========================当然css样式在浏览器中的兼容性 不止于这么点 后期会继续补充的

二 、事件在浏览器中的兼容性：

问题：

1. 事件对象，ie低版本不支持event

2. ie低版本不支持target

3. ie低版本不支持event.stopPropagation()阻止事件冒泡

4.ie低版本不支持 event.preventDefault() 阻止事件默认行为

5.chrome不支持setCapture()ie低版本支持 全局捕获 双击div里面的内容会被选中，用它解决

6.dom2级绑定ie低版本不支持addeventlistener

 

 

解决办法：

1.给函数传参或者使用window.event获取

2.e.target 在 IE6~8 中不存在，用 e.srcElement 获取。

3.e.stopPropagation() : IE 6~8 不兼容，用 e.cancelBubble = true 替代。

4.window.event.returnValue = false;

5

if(dv.setCapture)
    dv.setCapture();
else if(window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

6

//兼容addEventListener函数
function addEventListener(ele ,event , fn){
    if(ele.addEventListener){
        ele.addEventListener(event,fn , false) ;}
    else{
        ele.attachEvent( 'on '+event ,fn.bind (ele) ) ;
    }
}

三：Dom在ie低版本和chrome之间的兼容性

问题：

1、nodeType

2、获取子节点上有兼容性

　　参考网址(转载自):https://blog.csdn.net/kungfu_panda/article/details/39293843

　　参考网址(转载自):https://blog.csdn.net/weixin_41571938/article/details/115847628

3、获取兄弟节点有兼容性

　　参考网址(转载自):https://blog.csdn.net/qq_34664239/article/details/85321389

　　参考网址(转载自):https://blog.csdn.net/zbw18297786698/article/details/51579993