博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS兼容及处理
阅读量:6634 次
发布时间:2019-06-25

本文共 1794 字,大约阅读时间需要 5 分钟。

  hot3.png

IE的if条件Hack

1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉
2. 〈!--[if IE]〉 所有的IE可识别 〈![endif]--〉
3. 〈!--[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]--〉
4. 〈!--[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]--〉
5. 〈!--[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]--〉
6. 〈!--[if IE 6]〉 仅IE6可识别 〈![endif]--〉
7. 〈!--[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]--〉
8. 〈!--[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]--〉
9. 〈!--[if IE 7]〉 仅IE7可识别 〈![endif]--〉
10. 〈!--[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]--〉
11. 〈!--[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]--〉
注:
gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

以前对 IE9 以下兼容方法是直接在 HTML 的 head 头里面放个 IE 的兼容模式代码

<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7,IE=EmulateIE9" />

这样做就只需要兼容IE6,IE7。但是无法通过 W3C 验证的,还有些其他的缺陷,总觉得不太好,所以放弃了。

注意若要用此设置是不能通过 IE 特有的 HTML 浏览器判断语法的来控制的,如:

<!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->

这样写是没有用处的,而且必须是放在 head 的头部否则也不会识别

CSS兼容方法

  • 仅 IE6 和 IE7 识别,使用 * 星号

  • 仅 IE6 识别,使用 _ 下划线区别

  • 仅 IE7 识别,使用 + 加号

  • 仅 IE8 和 IE9 识别,使用 \0 符号

  • 仅 IE9 识别,使用 \9\0 ,同上, 多次测试后发现无效,后面有补充

  • 仅 IE6 不能识别: !important , 

  • 全部 IE 均可识别 \9 ,

使用顺序

#test {
         color : green !important ;
         color : #EEE ;
         color : #0F0 \ 9 ;
         color : #09F \ 0 ;
         color : #F00 \ 9 \ 0 ;
         * color : #000000 ;
         + color : #630 ;
         _ color : #FF0 ;
}

针对IE9兼容之前的写法有问题

:root #test { color : #F00 \ 0 ;}

这次测试发现貌似只有这样写才能真正的只让 IE9 识别

以上CSS将在 ie6 中显示 #FF0 颜色, IE6以上版本和 chrome、firefox 中显示 green,

  1. 去除 !important 后 

  2. IE6, 显示 #FF0 

  3. IE7, 显示 #630

  4. IE8, 显示 #09F

  5. IE9, 显示 #F00

  6. chrome、firefox 中显示 #EEE ,

以上的各种特殊符号对浏览器兼容基本上就够了,唯一缺憾是无法区别 chrome 和 firefox,不过还好他们两个的样式基本上差不多的,对于一些特殊的 css 属性可以添加各浏览器私有的属性前缀进行区别,但仅限部分样式有效

  • -webkit- Chrome ...

  • -moz- Firefox 

  • -ms- Microsoft

  • -o- Opera

转载于:https://my.oschina.net/anhoo/blog/324892

你可能感兴趣的文章
《数学与泛型编程:高效编程的奥秘》一2.1 埃及乘法算法
查看>>
中建普联陈红仙的大数据建设之路
查看>>
从大数据到“智能数据” MindSphere将重新塑造中国锂电制造的未来
查看>>
颢云卜晓军:行业+大数据是成功突破点
查看>>
Pivot3将NexGen全闪存层引入超融合型方案
查看>>
数据工程师的没落
查看>>
倡导绿色出行 高德地图举办“爱心林计划”公益活动
查看>>
“先体检,再治病“ 迪普科技为某金融企业量身定制安全方案
查看>>
UIT创新科:大力护盘自主可控高效存储
查看>>
《中国人工智能学会通讯》——5.19 对“人工智能威胁论”的释义
查看>>
闪存时代最佳搭档---第六代光纤通道存储网络
查看>>
大数据爆炸,你能听懂我的话吗?
查看>>
【短视频SDK】 如何实现变速录制做一个像抖音、muse这样的短视频应用
查看>>
为什么数据中心需要使用VMware NSX?
查看>>
Wi-Fi燃气报警器,妈妈再也不用担心了
查看>>
做好BYOD安全 必须保证“7个要务”
查看>>
开发漫谈:Ceph开源项目究竟是个什么鬼?
查看>>
安天发布措施紧急应对新型勒索软件“wannacry”
查看>>
《局域网交换机安全》一导读
查看>>
SonarQube Swift 1.5.1 发布
查看>>