兼容系列-IE678的兼容

baoxl 发布于2019-08-01 18:43 / 762人阅读

摘要：最简单的区分所有浏览器都会显示为紫色会显示红色会变为蓝色会变为绿色上面的样式解释为顺序是显示的结果用浏览，颜色是紫色用浏览，颜色是红色用浏览，颜色是蓝色用浏览，颜色是绿色支持伪元素伪元素和在及以下不支持兼容可以识别写法和兼容则需要引

1. 最简单的CSS Hack 区分 IE6 、 IE7 、IE8

css
.color{
    background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
    background-color: #FF00009; /*IE6、IE7、IE8会显示红色*/
    *background-color: #0066FF; /*IE6、IE7会变为蓝色*/
    _background-color: #009933; /*IE6会变为绿色*/
}

上面的样式解释为顺序是 ff、ie8、ie7、ie6显示的结果：
用 FF 浏览，颜色是紫色
用 IE8 浏览，颜色是红色
用 IE7 浏览，颜色是蓝色
用 IE6 浏览，颜色是绿色

2.IE678支持伪元素

伪元素::after和::before在IE8及以下不支持

兼容IE8可以识别写法 :after 和 :before

兼容IE6/7则需要引入jq插件：jquery.pseudo.js
使用方法：
1、引入jquery
2、引入jquery.pseudo.js
3、添加css，如p{before: "before ";}

代码示例：

3.a标签嵌套img有边框

html代码：

IE浏览器：

4.兼容HTML5新标签

第一种方法：使用javascript代码

第二种方法：使用html5shiv



//由于国内google的服务器访问卡，建议调用国内的cdn

5.兼容video audio标签

第一方法：在页面的head部分加入如下脚本
(注：需要在服务器下打开)

第二方法：使用谷歌的脚本html5media文件

6.兼容css3选择器

使用关键方法：（官网插件http://selectivizr.com/）

css样式不能直接写在head头部，需要通过link来引入外部样式

使用该插件前需要引入JS类库，如jQuery

需要运行在服务器下才有效

7.兼容placeholder

IE10及以下不支持placeholder

使用方法:

使用注意地方:

以上代码依然jq，在使用前注意要引用jq文件

8.IE678兼容media媒体查询

使用方法：插件respond.js（官网插件https://github.com/scottjehl/...）

使用插件兼容注意地方：

1.css样式不能直接写在head头部，需要通过link来引入外部样式
2.需要运行在服务器下才有效
3.js的引入要在css引入之后

代码示例：

IE7测试效果：

8.eval的兼容IE678

eval的兼容问题

IE6/7/8不兼容，报错
解决方式：
a) var s = "function(){alert("Test!")}";
b) var s = "0?0:function(){alert("Test!")}";
c) var fn = eval("(0 || " + s + ")"); fn();

e) var fn = eval("(0," + s + ")"); fn();
f) var fn = eval("0,(" + s + ")"); fn();

(注：a/b/c方案是国外网站找到，e/f是国内网站找到)

GPU云服务器云服务器兼容ie8的js有么 ie兼容 ie不兼容 ie10兼容模式

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

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

存在不同浏览器间的JS兼容总结

摘要：年月日个人博客文章迁移到当我们在编写用于处理事件时，由于考虑到不同浏览器间代码兼容不同，代码不易记忆于是做出如下整理。示例代码如下阻止默认事件标准兼容小提示也能阻止默认事件但是要注意位置。 2016年2月19日个人博客文章--迁移到segmentfault 当我们在编写JS用于处理事件时，由于考虑到不同浏览器间Js代码兼容不同，代码不易记忆,于是做出如下整理。（当然以后还会增加更新的。...

shmily 2019-08-22 15:38 评论0 收藏0
存在不同浏览器间的JS兼容总结

摘要：年月日个人博客文章迁移到当我们在编写用于处理事件时，由于考虑到不同浏览器间代码兼容不同，代码不易记忆于是做出如下整理。示例代码如下阻止默认事件标准兼容小提示也能阻止默认事件但是要注意位置。 2016年2月19日个人博客文章--迁移到segmentfault 当我们在编写JS用于处理事件时，由于考虑到不同浏览器间Js代码兼容不同，代码不易记忆,于是做出如下整理。（当然以后还会增加更新的。...

Benedict Evans 2019-08-01 18:43 评论0 收藏0
DOM事件

摘要：同一个元素可以绑定多个统一行为事件对象执行某一行为时，不仅执行了绑定方法，而且浏览器还会默认的给这个方法传递一个参数，这个参数就是事件对象。 1.理解事件事件行为本身：没有给事件绑定方法事件也是一直存在的，当触发行为的时候，也对触发对应的行为，只不过由于没有绑定事件，导致没有任何事件发生；事件绑定：给元素绑定一个方法；触发行为，执行方法； 2.DOM事件 DOM0级事件：1...

robin 2019-08-22 18:11 评论0 收藏0
jQuery真的过时了!

摘要：前言前几天知乎上有一个问题真的过时了吗我的答案是确实过时了感觉这个话题挺有趣，那咱们展开了聊聊。详细地说一下为什么过时了。天猫去年已经宣布不再支持。三并没有被淘汰虽然已经过时了，但是并没有被淘汰，而且近几年也不会。前言前几天知乎上有一个问题：jQuery真的过时了吗？我的答案是：jQuery确实过时了！感觉这个话题挺有趣，那咱们展开了聊聊。详细地说一下jQuery为什么过时了。一...

v1 2019-08-21 17:44 评论0 收藏0
手把手带你用原生js实现css属性的set和get

摘要：而现代浏览器会直接返回它的值，我们的目标就是在下也返回值。通过可以对元素的样式进行读写，实际上操作的是标签上的属性的值。因此不能直接对其赋值，不然就把整个属性的值给覆盖掉了。我们采用累加的方式来修改属性。上一篇博文介绍了getComputedStyle方法，接下来，我们就来实现一个简易版的小插件，能够在不借助jQuery的情况下实现css属性的获取和设置。作者：Icarus原文链接...

AZmake 2019-08-20 14:04 评论0 收藏0