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. 【转帖】Mysql多维数据仓库指南 第一篇 第1章

     Mysql多维数据仓库指南 第一篇基本原理 章节列表: 第1章:基本组成 第2章:维度历史 第3章:维度可加性 第4章:维度查询 本篇概述 你将运用关系数据库来实施一个维度数据仓库.事实表和维表这两 ...

  2. Ubuntu 实践

    Ubuntu 安装中文支持 开始装的是Ubuntu Server,后来需要某些图形工具,所以装了个Gnome,没想到无论如何都显示不了中文,按照网上的方法试了一堆,装了Synaptic,KDE和GNO ...

  3. centos6.5安装mongodb2.6

    下载地址:http://www.mongodb.org/downloads 解压命令:tar zxf mongodb-linux-i686-2.6.0.tgz 存放目录:/usr/local/mong ...

  4. PHP-CLI环境变量的设置和读取

    http://luokr.com/p/30 通常我们在维护PHP线上项目的时候,为了隔离配置和代码,会使用fastcgi_param的形式将环境变量定义在Nginx的配置文件中(Apache可以使用S ...

  5. Twain

    3.7.37 ICAP_SUPPORTEDSIZESType:TW_UINT16Supported Messages:MSG_GET - TW_ENUMERATIONMSG_GETCURRENT - ...

  6. span 英文数字保持一行,中文自动换行

    html 中 span 换行规则如下: span不换行默认只针对英文有效 如果想对中文设置有效需要添加样式 style="white-space:nowrap;" 默认的情况是这样 ...

  7. <target>.ID 和 <source>.ID 的属性冲突: DataType 属性不匹配

    ORACLE数据库主键的数据类型为number ,如果不指定长度会有 Merge报 <target>.ID 和 <source>.ID 的属性冲突: DataType 属性不匹 ...

  8. POJ-1143(状态压缩)

    Number Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3432 Accepted: 1399 Descripti ...

  9. 终于知道什么情况下需要实现.NET Core中的IOptions接口

    自从接触 IOptions 之后,一直纠结这样的问题:自己定义的 Options 要不要实现 IOptions 接口. 微软有的项目中实现了,比如 Caching 中的 MemoryCacheOpti ...

  10. 优化网站设计(二):使用CDN

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...