Web开发中常见的兼容性解决方案(持续汇总...)

Safari浏览器 2019-12-14

大纲

问题背景
HTML篇
CSS篇
Javascript篇
参考资料

问题背景

由于市场上浏览器种类众多，而不同厂商的浏览器其内核亦不尽相同，甚至同一厂商，不同版本之间的浏览器解析都有所不同。所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因。

我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。同一个功能我们可能有很多不同的代码实现方式，我们尽可能的选择兼容性高的写法。

HTML篇

CSS篇

Javascript篇

参考资料

结束语

每个程序员一生要学习100门语言。

见识越广，计较越少，经历越多，抱怨越少，越闲，越矫情。

: Safari浏览器

相关推荐

华为nova手机html微信和自带浏览器的兼容性问题

如果页面中的宽高用rem这个单位，则会出现dom元素宽度偏大，页面错乱的结果！高度目前无能为力。

curiousL 0喜欢 / 0评论 2020-04-14

Event对象跨浏览器兼容性写法

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

Wmeng0 0喜欢 / 0评论 2019-12-29

浏览器兼容性测试

兼容性测试内容:主要测试是页面的格式、字体、输入框、下拉框、复选康、按钮等检查，：页面显示正常，在对功能进行中检查

baynkbtg 0喜欢 / 0评论 2020-01-10

【web前端】谈谈浏览器的兼容性（面试题）

4.IE6下两个float之间会有个3px的bug解决办法：给右边的元素也设置float:left;

xxuncle 0喜欢 / 0评论 2019-12-28

IE与其他浏览器兼容性问题总结

　　在使用new ActiveXObject()之前先判断浏览器是否支持ActiveXObject对象，以创建AJAX对象为例：。jQuery.ajax({ url: sAspFile, data: "<root>" + s

Safari浏览器 0喜欢 / 0评论 2019-12-23

LoadRunner 与浏览器兼容性

LoadRunner 兼容的浏览器版本8.0 最高ie68.1 最高ie69.0 最高ie79.5 最高ie811.0 最高ie9( win7 32位+LR11+IE10可用，但win7 64位+LR11+IE10不可用，降至IE9可用)，支持firefo

Safari浏览器 0喜欢 / 0评论 2019-12-11

js关闭浏览器兼容性问题

FireFox中做如此设置以后，直接使用“window.close()”即可对窗口关闭。

中等偏下 0喜欢 / 0评论 2013-09-13

深入理解浏览器兼容性模式

关于各种浏览器模式，网上已经有许多文档和资料了，但是很少有能够完全将几个概念阐述清楚的。大部分的资料稍显过时，有些内容可能已经不再适用了。本文中笔者将尽可能将几个概念阐述清楚，并去掉一些过时的内容，仅保留必要的干货。想必你一定知道浏览器有个标准模式和一个怪

gxyblue 0喜欢 / 0评论 2014-01-21

IE 8 浏览器 placeholder 兼容性处理

由于公司的产品需要兼容 IE8 浏览器，在做登陆时，发现一个问题，placeholder 在input = text 情况下，显示还算正常，但在 input = password 就变成了两个点，百度，gg很多，有的是通过lable 模拟，另外还有通过定位

拭血 0喜欢 / 0评论 2019-11-17

浏览器兼容性问题

.txt {　　height: 30px;}.btn {　　height: 30px;}<input class="txt" type="text">

程序员俱乐部 0喜欢 / 0评论 2019-10-25

考虑有些客户用IE9外其他浏览器，给浏览器设计兼容模式，JSF 前端ie浏览器兼容性问题

总结：JSF本身自己自己带了许多自定义js和css，在jsf转换成html源码后，会自己定义的js和css引入进来，而<meta http-equiv="X-UA-Compatible" content ="IE-8&q

中等偏下 0喜欢 / 0评论 2015-07-17

如何解决日期函数new Date()浏览器兼容性问题

项目上与时间相关的地方特别多,与时间格式相关都使用了moment.js轻量级日期处理库，在开发中出现了几次浏览器兼容性问题，所以总结一下new Date()和moment.js在各大浏览器中兼容性问题，方便记忆或查阅。后台传回来的时间格式一般是字符串“20

Marksmeng 0喜欢 / 0评论 2019-09-11

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

遗憾的是，bootstrap table里自带的fixed column功能有一点bug，于是和同事讨论该如何解决，于是就有了这篇文章。最近项目里面有一个表格需求，该表格列是动态产生的，而且列的数量操作一定值以后就会出现横向滚动条，滚动的时候需要前面几列

Awara 0喜欢 / 0评论 2016-04-30

Window.open()详解及浏览器兼容性问题

各浏览器运行结果汇总：

中等偏下 0喜欢 / 0评论 2016-11-22

解决nth-child（n）属性在IE8浏览器中兼容性问题

学生提问：nth-child属性在IE8浏览器失效方案？这里我首先想到的一个简单的解决方案为CSS兄弟选择器，因为IE支持first-child与last-child，所以我可用兄弟选择器去解决。:nth-child用于匹配倍数为a的元素，如3n、5n…可

srdwxA 0喜欢 / 0评论 2018-03-16

谷歌Chrome浏览器在Win10预览版10525遇兼容性问题

在微软推送Win10预览版10525之后，很多升级到该版本的用户发现自己的谷歌Chrome浏览器无法正常打开网页，只出现一个灰白色页面，并给出如下提示：Aw，Snap！关闭你不需要的应用和选项卡，可能会对节省内存有帮助。这些问题都是今天升级到Win10预览

攸宁 0喜欢 / 0评论 2015-08-18

Win10 Edge浏览器太依赖IE11？只需关闭兼容性列表就搞定

微软为Win10量身定做的全新Edge浏览器肩负着接替IE浏览器的革命性使命，一直备受关注。不过这款浏览器在Windows10正式版发布一些时日以来的表现并不是很突出。除去内存占用高等性能因素外，“兼容性差”、“过分依赖IE浏览器”也是用户不太满意的关键因

ysd000 0喜欢 / 0评论 2015-08-06

一些兼容问题惹人心烦Win8如何调节IE浏览器的兼容性

　　Win8是Windows系统的一个重大全新变化，包括IE浏览器在内的很多方面都跟以往有重大差别。然而新的未必是好的，很多用户就不适应Win8的IE浏览器，一些兼容问题更是惹人心烦。　　我们可以试试调整IE的兼容版本，看是否能够解决IE浏览器的兼容问题。

zousy0 0喜欢 / 0评论 2014-08-07

手机浏览器兼容性测试结果概要

20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的。手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。“selec

Dilomen 0喜欢 / 0评论 2010-05-18

为什么要有兼容性测试：比web浏览器还恐怖的手机浏览器

操作系统X 7种浏览器+. 均指其最新版本。另，遨游浏览器虽然是基于ie内核，但某些表现却完全出人意料，故也加入考虑。目前还不太可能在手机上创建很复杂的js效果，可以仅测试js的基本功能，比如对事件的支持，当然，使用js最重要的是要考虑好如何优雅降级，确。

指尖 0喜欢 / 0评论 2010-05-18

Font-face目前浏览器的兼容性

Webkit/Safari：TrueType/OpenType TT 、OpenType PS ； Opera (10+)： TrueType/OpenType TT 、 OpenType PS 、 SVG ； Internet Explorer：

zyytaiyame 0喜欢 / 0评论 2019-07-01

浏览器兼容性

概述为了测试框架的兼容性，下载了Turbo.net，用了之后感觉软件真强大，几乎能模拟所有主流浏览器。浏览器的环境不同，运行出来的网页效果也不同。盒子模型一道面试题，现在已经被当成笑话了。这就很皮了，为啥IE就这么隔路呢？浏览器发展史1991年，世界上第一

zaocha 0喜欢 / 0评论 2019-06-29

解决nth-child（n）属性在IE8浏览器中兼容性问题

学生提问：nth-child属性在IE8浏览器失效方案？这里我首先想到的一个简单的解决方案为CSS兄弟选择器，因为IE支持first-child与last-child，所以我可用兄弟选择器去解决。:nth-child用于匹配倍数为a的元素，如3n、5n…可

pengornis 0喜欢 / 0评论 2018-03-16

从html,css,javascript三方面谈谈“浏览器兼容性”的问题

可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。offsetHeight：关于offsetHeight，ie和firefox等不同浏览中意义有所不同，需要加以区别。在ie中，offsetHeight 的取值为 clientHeight加上滚动条及

李守彬的空间 0喜欢 / 0评论 2019-06-28

遇到的几个浏览器兼容性问题

背景解决浏览器的兼容性问题是一件很烦的事情，其中并没有太多高深的技巧，但是开发需要，也不得不去解决它，最近在开发项目中也遇到一些兼容性的问题，希望把这些问题的解决方式记录下来，下次遇到就直接拿过来用，也希望对他人有一些帮助。}3.css的transitio

zyytaiyame 0喜欢 / 0评论 2019-06-28

Window.open()详解及浏览器兼容性问题

各浏览器运行结果汇总：

羽化大刀Chrome 0喜欢 / 0评论 2016-11-22

前端开发手机内置浏览器(含js函数)兼容性汇总之那些踩过的坑

当一个React的项目在多数手机正常运行时，这个时候有些手机就是不支持这个函数。原因是由于内置浏览器的版本过低，不支持一些新的JS函数。

baynkbtg 0喜欢 / 0评论 2016-06-20

《JavaScript高级程序设计》中关于浏览器兼容性的总结未完待续~~~

此外，本系列博文还会记录一些跨浏览器的方法，比如跨浏览器进行事件绑定。在严格模式下，不能定义名为 eval 或 arguments 的变量，否则会导致语法错误。回 undefined 而不是数组的新长度。括 IE9+、 Firefox 2+、 Safari

羽化大刀Chrome 0喜欢 / 0评论 2016-05-25

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

遗憾的是，bootstrap table里自带的fixed column功能有一点bug，于是和同事讨论该如何解决，于是就有了这篇文章。谷歌浏览器效果如下：

我与大象的故事 0喜欢 / 0评论 2016-04-30

CSS 多浏览器兼容性问题及解决方案

#IamFloat{. float:left;margin:5px;/*IE下理解为10px*/. display:inline;/*IE下再理解为5px*/. }. #IamFloat{. float:left;margin:5px;/*IE下理解为10

liboqiao 0喜欢 / 0评论 2016-04-07

Javascript 多浏览器兼容性问题及解决方案

最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。event.srcElement : event.target;如果考虑第8条问题，就改用myEvent代替event即可。

notepaper 0喜欢 / 0评论 2016-04-07

旧版系统IE兼容性问题

公司上了个门户系统，需要把项目组下的项目都集成在门户中。去年我接手了这个项目，当时接触过这个系统的同事就告诉我，这个系统只能在IE8以下正常访问，高版本浏览器会出问题，客户也知道这个情况。本来一切相安无事，但这个门户要求的浏览器版本是IE8以上，于是，当用

Teresasmida 0喜欢 / 0评论 2016-01-26

如何机制地回答浏览器兼容性问题

前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。"来谈谈浏览器兼容的问题吧"，"你对浏览器的兼容性有了解过吗"，那么如何才是我们正确回答这个问题的姿势呢

kingwbs 0喜欢 / 0评论 2019-06-27

考虑有些客户用IE9外其他浏览器，给浏览器设计兼容模式，JSF 前端ie浏览器兼容性问题

</h:head> 这样写从写的代码上看是没啥错误，用IE9测试发觉没啥作用，在编译后生成的html文件中查看ie源码发觉jsf自己带了一些不认识js引入:. </h:head>总结：JSF本身自己自己带了许多自定义js和css，

huakaiwuxing 0喜欢 / 0评论 2015-07-17

js 兼容性

jQuery从1.9版开始，移除了$.browser和$.browser.version，取而代之的是$.support。在更新的2.0版本中，将不再支持IE6/7/8。以后，如果用户需要支持IE6/7/8，只能使用jQuery1.9。从长久来看，这样有利

srdwxA 0喜欢 / 0评论 2015-05-23

jquery浏览器兼容性问题集

判断是否选中等可以用jquery的is函数：var p = $.is;

83493467 0喜欢 / 0评论 2015-05-07

浏览器兼容性问题（内核、IEtester、cssrest、盒模型）

当窗口大小改变的时候，页面内容可能会消失；上一页/下一页功能不正常；Focus功能不正常；Javaapple不能运行；Flash不能在IE6下正常运行。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。解决办法：cs

Teresasmida 0喜欢 / 0评论 2015-05-04

浏览器的兼容性(一、hankcss)

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。选择器Hack：比如IE6能识别*html.class{}，IE7能识别*+html.class{}，或者*:first-child+html.class{}. HTML头部引用

zengni 0喜欢 / 0评论 2015-05-04

div盒子宽度高度兼容性

浏览器的宽度和高度包括border和padding的宽度和高度,而火狐等满足W3C标准的非IE浏览器。当含有两个同一属性时，会使用后面一个属性的值。important,所以他会使用后面的300px；此时ie的宽度为300-5-5-20-20=250；imp

galilajiao00 0喜欢 / 0评论 2015-01-20

My97DatePicker IE兼容性

在项目jsp中调用My97DatePicker ，在火狐等浏览器中不需要做更改，但是在IE等浏览器中会出现加载不出来的现象。

gxyblue 0喜欢 / 0评论 2014-11-25

Jquery ajax兼容性针对IE8

如果红色部分参数没加进来，在IE8下运行这段代码会一直alert，在其它浏览器不会出现这种情况。这种情况会出现很严重问题，如果你在回调函数seccess下在调用这个ajax就会出现死循环，这样浏览器会直接死掉（无响应），所有在用jquery ajax时候统

89307547 0喜欢 / 0评论 2014-11-24

Javascript 多浏览器兼容性问题及解决方案

不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。如果考虑第8条问题，就改用myEvent代替

selt 0喜欢 / 0评论 2014-08-14

常见浏览器兼容性问题与解决方案

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到

huanghuang 0喜欢 / 0评论 2014-05-22

CSS兼容性常见问题

important 方法现在只针对IE6的兼容.例如:#example {width: 100px !important; /* IE7+FF */width: 103px; /* IE6 */}二、CSS HACK的方法首先需要知道的是：所有浏览器通用

csscode 0喜欢 / 0评论 2014-05-06

浏览器兼容性解决方法

var rs=obj.innerText||obj.textContent;获得对象的内部文本。例如：obj.att1||obj.att2||...||obj.attn兼容的事件写法：obj.onclick=function{var e=e||event;

Teresasmida 0喜欢 / 0评论 2014-04-02

常见浏览器兼容性问题与解决方案

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。浏览器兼容问题三：设置较

srdwxA 0喜欢 / 0评论 2014-02-25

深入理解浏览器兼容性模式

关于各种浏览器模式，网上已经有许多文档和资料了，但是很少有能够完全将几个概念阐述清楚的。大部分的资料稍显过时，有些内容可能已经不再适用了。本文中笔者将尽可能将几个概念阐述清楚，并去掉一些过时的内容，仅保留必要的干货。想必你一定知道浏览器有个标准模式和一个怪

yidaizongshi 0喜欢 / 0评论 2014-01-21

CSS中!important的作用--浏览器兼容性

important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解

福叔 0喜欢 / 0评论 2013-12-25

跨浏览器兼容性总结

网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV

yidaizongshi 0喜欢 / 0评论 2013-11-25