CSS Hack:

不到万不得已,不要使用。不易于维护。

有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行。

此时,CSS Hack 就能实现。


CSS Hack 实际上指的是一段特殊的代码,这段代码只在特定的浏览器环境下识别并执行。


写法:

条件Hack只对IE9及以,下的浏览器有效,其他浏览器视为注释

<!--[if <关键字>? IE <版本>?]>

<![end]-->

关键字:

""    是否为

"gt"    大于

"gte"    大于等于

"lt"    小于

"lte"    小于等于

"!"    不是


<!--[if IE 8]>

<p>当前浏览器为IE8 !<p>

<![end]-->


<!--[if lte IE 7]>

<p>您的环境为IE7及以下 !</p>

<![end]-->

 
    <!--条件Hack-->
<!--[if IE 6]>
<!-- 引入外部js文件 -->
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script> <!-- 写js处理 -->
<script type="text/javascript">
DD_belatedPNG.fix("div,body"); // 修复div的图片显示,可以写*代替,但是会影响性能。
</script>
<![end]-->
 

属性级Hack

假设 color 属性,在 IE6 需要设置成 red,但是在其他需要设置成 blue

_样式        IE6 及以下浏览器执行。

*样式        IE7 及以下浏览器执行。

color: red\9;        IE6 及以上的浏览器执行。

color: red\0;        IE8 及以上的 或者 Oprea15以下的浏览器执行。

*{

}


选择符级Hack

IE6

* html body{

}

IE7

*+html body{

}

IE8+ 或 非IE

body:lang{

}

IE9+ 或 非IE

body:nth-child(1){

}

_CSS Hack的更多相关文章

  1. 前端技术之_CSS详解第四天

    前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...

  2. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  3. CSS3_01之选择器、Hack

    1.兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2:②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2: 2.属性选择器:attr表示属性名称,elem表示元素名:①[ ...

  4. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  5. Medial Queries的另一用法——实现IE hack

    众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...

  6. CSS Hack

    CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...

  7. hack

    1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法,具体如: @ ...

  8. 浅谈CSS hack(浏览器兼容)

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  9. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

随机推荐

  1. 05原型模式Prototype

    一.什么是原型模式 Prototype模式是一种对象创建型模式,它采 取复制原型对象的方法来创建对象的实例.使用 Prototype模式创建的实例,具有与原型一样的 数据. 二.原型模式的特点 1. ...

  2. chrome调试创建sq设备进行调试

    工作中开发基于手机qq的webapp页面时,通常开发会对页面进行限制让用户通过手机qq访问,进行引导,如下图所示. 很多时候我们开发只是在手机展示,而在pc端进行调试,当开发加了这一层限制之后,就会导 ...

  3. Dom捕捉事件和冒泡事件-原理与demo测试

    先参考一下百度百科对冒泡事件流的解释: ----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了! http://baike.baidu.com/link?url=kaeJHT ...

  4. 客户端TortoiseSVN的安装及使用方法 (申明:来源于网络)

    客户端TortoiseSVN的安装及使用方法 (申明:来源于网络) 地址:http://blog.chinaunix.net/uid-27004869-id-4112057.html

  5. Nodejs----注册登录

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  6. .NET Core开发日志——Action

    在叙述Controller一文中,有一处未做解释,即CreateControllerFactory方法中ControllerActionDescriptor参数是如何产生的.这是因为其与Action的 ...

  7. [No0000B6]C#中 ==与equals的区别

    using System; internal class Person { public Person(string name) { Name = name; } public string Name ...

  8. Python:正则表达式

    学习内容参考:Python正则表达式指南 匹配流程 语法表

  9. Python:random模块

    近排练习代码时候经常会用到random模块,以防后面忘记还是需要记录一下. 首先导入模块: import random random.random():用于生成一个0到1的随机浮点数: 0 <= ...

  10. winform 科学计数法转为小数

    先强制转换为decimal. 例如: double xyTolerance = 0.000000008983001; txtXYTolerance.Text = ((decimal)xyToleran ...