浏览器兼容你知多少？

txgcwm 发布于2019-08-30 10:48 / 840人阅读

摘要：在各大浏览器厂商的发展过程中，它们对的标准各有不同的实现，标准不同存在差异所以产生兼容性的问题。它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。但是及更低版本浏览器会继续解析。

为什么会存在浏览器兼容问题？

首先要了解兼容，我们先得了解一下为什么会存在浏览器兼容问题。在各大浏览器厂商的发展过程中，它们对web的标准各有不同的实现，标准不同存在差异所以产生兼容性的问题。

浏览器内核

五大浏览器内核以及各内核代表作品：

Trident: IE、Maxthon（遨游）、Theworld（世界之窗）

Gecko: Mozilla Firefox

Webkit: Safari、Chrome

Presto: Opera

Blink: 由Google和Opera Softwase开发的浏览器排版引擎

一些概念

CSS BUG

Css样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为CSS Bug

CSS hack

CSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。

Filter

它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。

过滤器(filter)

ps：过滤器可能这个说法有点不太正确，也可以说是浏览器标识符！

_下划线过滤器

当一个属性前面增加一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明。但是ie6及更低版本浏览器会继续解析。
语法：选择器{_属性：属性值；}
此方法是区分ie6浏览器和其他浏览器的方法

！important关键字过滤器

它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法）
语法：选择符{属性：属性值！important；}

*属性过滤器

当一个属性前面加了*后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{*属性：属性值；}

+属性过滤器

当一个属性前面加了+后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{+属性：属性值；}

*+属性过滤器

当一个属性前面加了*+后，该属性能被ie7浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{*+属性：属性值；}

ie版本识别，其他浏览器不识别
语法：选择符{属性：属性值9;}

ie8及以上浏览器识别，其他浏览器不识别
语法：选择符{属性：属性值0;}

-moz-

Firefox浏览器识别，其他浏览器不识别

-webkit-

webkit内核浏览器识别，其他浏览器不识别

-o-

Opera浏览器识别，其他浏览器不识别

-ms-

ie浏览器识别，其他浏览器不识别

常见的浏览器兼容问题以及解决方法

1）、图片有边框bug

描素:当图片加在ie上会出现边框

hack:给图片加border：0；或者border：0 none；

2）图片间隙

描素:div中的图片间隙bug

在div中插入图片时图片将div下方撑大大约三像素

hack1：将

与

(1)访问frame对象:

IE:使用window.frameId或者window.frameName来访问这个frame对象, frameId和frameName可以同名。

Firefox:只能使用window.frameName来访问这个frame对象.

另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

(2)切换frame内容:

在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.

如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";

15）模态和非模态窗口问题

说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.

解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.

例如：

var parWin = window.opener;
parWin.document.getElementById("Aqing").value = "Aqing";

小广告

我自己运营的公众号，记录我自己的成长！

公众号：前端曰

公众号ID：js-say

ps：是(yue)不是(ri)

GPU云服务器云服务器 js兼容浏览器兼容多浏览器兼容兼容多浏览器 js浏览器兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114585.html

移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

Nosee 2019-08-19 18:36 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

microelec 2019-08-01 15:24 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

Achilles 2019-08-30 15:45 评论0 收藏0
魔法CSS（1）——消失的list-style

摘要：有时候一个简单的出现，往往是由于一点知识小细节但往往这点小细节看似简单，其背后却颇有韵味。如果这篇文章对你有所收获，请留在你的小心心其他推荐你知多少常用操作有时候一个简单Bug的出现，往往是由于一点知识小细节；但往往这点小细节看似简单，其背后却颇有韵味。（需求）这部分UI给换成这样的 showImg(https://segmentfault.com/img/bVbjgWw?w=64...

Fourierr 2019-08-23 13:02 评论0 收藏0