当前位置: 首页 > Web前端 > HTML

兼容系列-兼容IE678

时间:2023-04-03 00:58:45 HTML

1.最简单的CSSHack区分IE6,IE7,IE8css.color{background-color:#CC00FF;/*所有浏览器都会显示紫色*/background-color:#FF0000\9;/*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及以下,可以识别写法:after和:before兼容IE6/7,需要引入jq插件:jquery.pseudo.js使用方法:1、导入jquery2,导入jquery.pseudo.js3,添加css,如p{before:"before";}代码例子:3.一个标签嵌套img有边框html代码:IE浏览器:4.兼容HTML5新标签第一种方法:使用javascript代码第二种方法:使用html5shiv//因为国内google服务器接入卡,建议调用国内cdn5.兼容视频音频标签第一种方法:在页面head部分添加如下脚本(注意:需要在服务器下开启)第二种方法:使用Google的脚本html5media文件6.兼容css3选择器关键方法:(官网插件http://selectivizr.com/)css样式不能直接写在head中,使用本插件前需要通过链接引入外部样式引入JS库,如jQuery7.兼容placeholderIE10及以下不支持placeholder使用:使用注意事项:以上代码还是jq,使用前注意参考jq文件8.IE678兼容媒体媒体查询方式:插件respond.js(官网插件https://github.com/scottjehl/...)使用插件incompatibilityNotes:1、css样式不能直接写在head中,需要通过链接引入外部样式2、需要在server下运行有效3、js的引入要在后面引入css代码示例:IE7测试结果:8.evalIE678兼容evalIE6/7/8不兼容,报错解决方法:a)vars="function(){alert('Test!')}";b)vars="0?0:function(){alert('Test!')}";c)varfn=eval("(0||"+s+")");fn();e)varfn=eval("(0,"+s+")");fn();f)varfn=eval("0,("+s+")");fn();(注:a/b/cplan是国外网站找的,e/f是国内网站找的)