chrome-Firefox-IE浏览器兼容总结

2024-06-19 20:48

本文主要是介绍chrome-Firefox-IE浏览器兼容总结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

作为一名WEB前端程序员,相信每个人对浏览器的兼容都"情有独钟",下面就一些常用的浏览器的兼容列举一二。

一、块级元素(block)一般不转化为inline-block,其实是因为浏览器的兼容问题,IE8以下的浏览器不     支持块级元素转化为行内块元素(可以使用浮动)。

二.获取元素样式:
1.oDiv.style.background:
  获取到的是行内样式的属性
2.获取显示的样式:
  标准浏览器(IE9以下是不支持):
    getComputedStyle(标签元素,false).属性名
  IE9以下获取内联样式:
    标签元素.currentStyle.属性名

  做浏览器的兼容:
  if (oDiv.currentStyle) {
    //在IE9以下
    oDiv.currentStyle.width;
  } else {
    //标准浏览器
    getComputedStyle(oDiv,false).width;
  }

3.oDiv.offset.width=100;注意:不带'px',上面两个获取的带'px'

三.获取兄弟节点
  nextSibling,previousSibling
  在高级和IE9以上的浏览器里面,兄弟节点会获取到空格,在IE8以下,才能获取到我们想要的元素节点

  previousElementSibling,nextElementSibling
  在高级和IE9以上的浏览器里面,兄弟节点会获取到对应的元素,在IE8以下,不能获取到我们想要的元素节点

  var oP1 = oP.previousElementSibling || oP.previousSibling;

四.获取第一个或最后的兄弟节点
  获取节点,获取第一个节点,获取最后一个节点
  父节点.firstChild;
  父节点.lastChild;
  1.兼容所有的浏览器
    oUl.firstElementChild || oUl.firstChild
  2.兼容所有的浏览器
    oUl.lastElementChild || oUl.lastChild

五.向上滚动的距离:
  1.在谷歌里面:
    document.body.scrollTop
  2.在火狐、IE里面:
    document.documentElement.scrollTop
  3.兼容所有浏览器:
    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

六、事件绑定的兼容
  if (obj.addEventListener) {
    //在高级浏览器
    obj.addEventListener(type,fn,false);
  } else {
    obj.attachEvent('on'+type,fn)
  }
  事件移除的兼容
  if (obj.removeEventListener) {
    obj.removeEventListener(type,fn,false);
  } else {
    obj.detachEvent('on'+type,fn);
  }

七、阻止默认事件的兼容
  function(evt) {
    var oEvent = evt || event;
    oEvent.preventDefault && oEvent.preventDefault();
    return false;
  }

八、事件委托兼容
  srcElement: 获取到事件真正作用的那个元素 (不兼容Firefox,专门用来做IE浏览器的兼容)
  target: 获取到事件真正作用的那个元素 (兼容高级浏览器)
  var oLi = oEvent.srcElement || oEvent.target;

  addEvent('oUl','click',function(evt){

    var oEvent=evt||event;

    var oLi=oEvent.srcElement||oEvent.target;

  })

这篇关于chrome-Firefox-IE浏览器兼容总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076110

相关文章

Python依赖库的几种离线安装方法总结

《Python依赖库的几种离线安装方法总结》:本文主要介绍如何在Python中使用pip工具进行依赖库的安装和管理,包括如何导出和导入依赖包列表、如何下载和安装单个或多个库包及其依赖,以及如何指定... 目录前言一、如何copy一个python环境二、如何下载一个包及其依赖并安装三、如何导出requirem

Rust格式化输出方式总结

《Rust格式化输出方式总结》Rust提供了强大的格式化输出功能,通过std::fmt模块和相关的宏来实现,主要的输出宏包括println!和format!,它们支持多种格式化占位符,如{}、{:?}... 目录Rust格式化输出方式基本的格式化输出格式化占位符Format 特性总结Rust格式化输出方式

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

Python中连接不同数据库的方法总结

《Python中连接不同数据库的方法总结》在数据驱动的现代应用开发中,Python凭借其丰富的库和强大的生态系统,成为连接各种数据库的理想编程语言,下面我们就来看看如何使用Python实现连接常用的几... 目录一、连接mysql数据库二、连接PostgreSQL数据库三、连接SQLite数据库四、连接Mo

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

Git提交代码详细流程及问题总结

《Git提交代码详细流程及问题总结》:本文主要介绍Git的三大分区,分别是工作区、暂存区和版本库,并详细描述了提交、推送、拉取代码和合并分支的流程,文中通过代码介绍的非常详解,需要的朋友可以参考下... 目录1.git 三大分区2.Git提交、推送、拉取代码、合并分支详细流程3.问题总结4.git push

Kubernetes常用命令大全近期总结

《Kubernetes常用命令大全近期总结》Kubernetes是用于大规模部署和管理这些容器的开源软件-在希腊语中,这个词还有“舵手”或“飞行员”的意思,使用Kubernetes(有时被称为“... 目录前言Kubernetes 的工作原理为什么要使用 Kubernetes?Kubernetes常用命令总

Python如何使用seleniumwire接管Chrome查看控制台中参数

《Python如何使用seleniumwire接管Chrome查看控制台中参数》文章介绍了如何使用Python的seleniumwire库来接管Chrome浏览器,并通过控制台查看接口参数,本文给大家... 1、cmd打开控制台,启动谷歌并制定端口号,找不到文件的加环境变量chrome.exe --rem

Python中实现进度条的多种方法总结

《Python中实现进度条的多种方法总结》在Python编程中,进度条是一个非常有用的功能,它能让用户直观地了解任务的进度,提升用户体验,本文将介绍几种在Python中实现进度条的常用方法,并通过代码... 目录一、简单的打印方式二、使用tqdm库三、使用alive-progress库四、使用progres

Android数据库Room的实际使用过程总结

《Android数据库Room的实际使用过程总结》这篇文章主要给大家介绍了关于Android数据库Room的实际使用过程,详细介绍了如何创建实体类、数据访问对象(DAO)和数据库抽象类,需要的朋友可以... 目录前言一、Room的基本使用1.项目配置2.创建实体类(Entity)3.创建数据访问对象(DAO