浏览器兼容性问题

加密通信
• 阅读 2662

问题:经常遇到的浏览器的兼容性的情况、解决方法?
思路:首先明确项目要兼容哪些浏览器的最低版本,然后考虑到CSS样式和JavaScript在这些浏览器的兼容性。

一、HTML 兼容性
  1.H5新标签在低于IE9的浏览器中的识别
  html5shiv.min.js:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。
  respond.min.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
  <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5s...;></script>
    <script src="http://cdn.bootcss.com/respon...;></script>
  <![endif]-->
  引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)。

  2.不同浏览器的标签默认的内/外补丁不同
  虽然这些年来随着浏览器的迅速发展与规范的统一,浏览器特性碎片化的情况有所改善,但是在不同的浏览器之间仍然存在着很多的行为差异。而解决这种问题的最好的办法就是使用某个CSS Reset来为所有的元素设置统一的样式,保证你能在相对统一干净的样式表的基础上开始工作。目前流行的Reset库有 normalize.css, minireset 以及 ress ,它们都可以修正很多已知的浏览器之间的差异性。而如果你不打算用某个外在的库,那么可以使用如下的基本规则:
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  *号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

二、CSS 兼容性
  1.IE的条件注释hack:
  <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
  <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
浏览器兼容性问题

  2.IE 属性过滤器(较为常用的hack方法)
  针对不同的 IE 浏览器,可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制。
浏览器兼容性问题

  3.浏览器 CSS 兼容前缀
  使用特定的浏览器前缀是CSS开发中常见的工作之一,不同的浏览器、不同的属性对于前缀的要求也不一样,这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活,幸亏现在也是有很多工具可以辅助我们进行这样的开发:

  4.a 标签的几种 CSS 状态的顺序
  很多人在写 a 标签的样式,会疑惑为什么写的样式没有效果,或者点击超链接后,hover、active 样式没有效果,其实只是写的样式被覆盖了。
  正确顺序:L-V-H-A : a:link, a:visited, a:hover, a:active {}
   ":link": a标签还未被访问的状态;
   ":visited": a标签已被访问过的状态;
   ":hover": 鼠标悬停在a标签上的状态;
   ":active": a标签被鼠标按着时的状态;

  5.IE6 双倍边距的问题
  在 ie6 中设置浮动,同时又设置 margin,会出现双倍边距的问题
  解决方法:display: inline;

  6.透明度的兼容CSS设置
  IE用 filter:alpha(opacity=60),而其他主流浏览器用 opacity:0.6;

  三、JavaScript的兼容性
兼容性对象 一般浏览器 IE
绑定和删除事件处理程序 addEventListener removeEventListener attachEvent detachEvent
获取事件的目标 event.target event.srcElement
阻止事件默认行为 event.returnValue event.preventDefault
停止事件冒泡 stopPropagation cancelBubble
创建XHR对象 XMLHttpRequest构造函数 activeXObject

参考文章:

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Stella981 Stella981
4年前
CSS兼容性(IE和Firefox)技巧大全
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响CSS处理,作为W3C的标准,一定要加DOCTYPE声明。CSS技巧1.div的垂直居中问题verti
Stella981 Stella981
4年前
JavaScript零基础入门——(十二)JavaScript的定时器
JavaScript零基础入门——(十二)JavaScript的定时器大家好,欢迎回到我们的JavaScript零基础入门。上一节课我们讲了JavaScript中一些常用的DOM操作,这里要补充一个点,上节课讲的table几个常用属性其实是有兼容性问题的,在部分IE浏览器中是不识别的
Stella981 Stella981
4年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Wesley13 Wesley13
4年前
VS2019编译 当前最新版chromium
之前编译过webrtc和chromium,由于长时间没用,被我删除了,最近在最新版本的google浏览器上遇到了播放器兼容性问题,老版本的google浏览器是没问题,IE,火狐浏览器也没问题,通过看google浏览器的打印日志和chromium媒体层的代码,排查下来,是ffmpeg调用解码器解码AAC失败了,有个别数据解码失败,我们是使用的lib
Stella981 Stella981
4年前
Echarts 数据视图 生成Excel的方法
一、生成Excel,两大方向:1后台生成Excel  查询数据库,使用NOPI生成Excel。2前台js生成Excel三种方式1)jquery.table2excel.js\采用,优势:兼容IE和Chrome。2)handsontable0.32.0问题:不兼容IE。3)手写js有兼容性问题。问题:浏览器兼容
Wesley13 Wesley13
4年前
47种常见的浏览器兼容性问题大汇总
!(https://oscimg.oschina.net/oscnet/dbaf9f26595b4ed1b5165db8378d4781.png)浏览器兼容性问题大汇总!(https://oscimg.oschina.net/oscnet/8cc1d9bd64e249f18ff0b84249560a8a.jpg)Ø
Wesley13 Wesley13
4年前
IE下常见兼容性问题记录汇总(04
现在开发环境主要使用的ie9以上的浏览器,而实际上依然存在大量用户使用xp系统,而xp最高只能装到ie8,前段还不能放弃对ie8的兼容,现针对实际开发中所遇ie的兼容性问题和解决方案做个汇总(持续更新):IE8系列:1:JSON序列化与解析,现代浏览器都有原生JSON对象支持,而IE8没有,可以使用json2.js,配合针对ie的条件注释。2:t
Stella981 Stella981
4年前
Javascript浏览器兼容性
JS<noscript标签早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript元素,用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body中的任何HTML元素一一<scri