CSS 浏览器兼容hack整理收藏

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:08 我要评论(0)

CSS hack就是利用浏览器的一些bug来做一些用正常css处理起来比较麻烦的不兼容的东西了,下面我整理了些常用的css hack代码与大家分享。

兼容范围:

IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome

参考资料:

1, IE条件注释法,微软官方推荐的hack方式。

只在IE下生效

<!--[if IE]>

这段文字只在IE浏览器上显示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

这段文字只在IE6浏览器上显示

<![endif]-->

只在IE6以上版本生效

<!--[if gt IE 6]>

这段文字只在IE6以上版本IE浏览器上显示

<![endif]-->

只在IE7上不生效

<!--[if ! IE 7]>

这段文字在非IE7浏览器上显示

<![endif]-->

非IE浏览器生效

<!--[if !IE]><!-->

这段文字只在非IE浏览器上显示

<!--<![endif]-->

2, 选择符前缀法,即在CSS选择符前加一些只有特定浏览器才能识别的前缀。

*html 前缀只对IE6生效

*+html 前缀只对IE7生效

示例

.test{ color:#FFF;}

*html .caibaojian_com{ color:#000;}/* only for ie6 */

*+html .caibaojian_com{ color:#CCC;} /* only for ie7 */

3, 属性前缀法,即在样式属性名前加一些只有特定浏览器才能识别的前缀。

"_" 只对IE6生效

"+" 只对IE7生效

"*" 只对IE6和IE7生效

例如:

.caibaojian_com{ color:#FFF; *color:#CCC; _color:#000;}

4, 还有一种hack方法是在属性值后加上一些只有特定浏览器才能识别的前缀。

"9"IE6/IE7/IE8/IE9/IE10都生效

""IE8/IE9/IE10都生效

"9" 只对IE9/IE10生效

:root .test { color:#963; } 只对IE9/IE10生效

.test{color//:#963;} //针对非IE的浏览器

!important 对IE6无效(一般情况下,特殊情况有效,比如两个css复写,后一个的如果加!important则对IE6有效)

例如:

.caibaojian_com{ color:#FFF; color:#CCC9; color:#3FC; color:#eee9}

:root .caibaojian_com{color:#eee}

.test{color//:#333;}综合一下就是下面这段代码

.all-IE { property:value9; }

:root .IE-9 { property:value/; }

.gte-IE-8 { property:value; }

.lte-IE-7 {*property:value; }

.IE-7 {+property:value; }

.IE-6 { _property:value; }

.not-IE {property//:value;}

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...