游客您好
第三方账号登陆
Lv.7 版主
1683号会员,81活跃度,2020/05/16 加入学习
  • 14发帖
  • 14主题
  • 0关注
  • 0粉丝
这个人很懒,什么也没有留下。
最新推荐更多

[CSS样式] 兼容系列-IE678的兼容 兼容 ie兼容 html

[复制链接]
前端速报 发表于 2020-5-20 15:39:01 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
兼容系列-IE678的兼容 兼容 ie兼容 html
1. 最简单的CSS Hack 区分 IE6 、 IE7 、IE8
css
.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及以下不支持
兼容IE8可以识别写法 :after 和 :before
兼容IE6/7则需要引入jq插件:jquery.pseudo.js
使用方法:
1、引入jquery
2、引入jquery.pseudo.js
3、添加css,如p{before: "before
";}
代码示例:

image001.png

兼容系列-IE678的兼容 兼容 ie兼容 html,慧之家

3.a标签嵌套img有边框
html代码:

image002.png

兼容系列-IE678的兼容 兼容 ie兼容 html,慧之家

IE浏览器:

image003.png

兼容系列-IE678的兼容 兼容 ie兼容 html,慧之家

4.兼容HTML5新标签
第一种方法:使用javascript代码

第二种方法:使用html5shiv


//由于国内google的服务器访问卡,建议调用国内的cdn
5.兼容video audio标签
第一方法:在页面的head部分加入如下脚本
(注:需要在服务器下打开)
   
第二方法:使用谷歌的脚本html5media文件
6.兼容css3选择器
使用关键方法:(官网插件http://selectivizr.com/
  
  
css样式不能直接写在head头部,需要通过link来引入外部样式
使用该插件前需要引入JS类库,如jQuery
需要运行在服务器下才有效
[/ol]

image004.png

兼容系列-IE678的兼容 兼容 ie兼容 html,慧之家

7.兼容placeholder
IE10及以下不支持placeholder
使用方法:
对于IE 10 以下版本placeholder的兼容性调整 -->
使用注意地方:
以上代码依然jq,在使用前注意要引用jq文件

image005.png

兼容系列-IE678的兼容 兼容 ie兼容 html,慧之家

8.IE678兼容media媒体查询
使用方法:插件respond.js(官网插件https://github.com/scottjehl/...
使用插件兼容注意地方:
1.css样式不能直接写在head头部,需要通过link来引入外部样式
2.需要运行在服务器下才有效
3.js的引入要在css引入之后
代码示例:

image006.png

兼容系列-IE678的兼容 兼容 ie兼容 html,慧之家

IE7测试效果:

image007.gif

兼容系列-IE678的兼容 兼容 ie兼容 html,慧之家

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是国内网站找到)

• 本内容来源互联网,如涉及版权问题请及时联系站长
• 为防止代码解析,除代码框内<>为正常,其余请重新替换<>尖括号

发布资源 快速回复 站点服务大厅 搜索 官方群