Hack技术

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

只在IE下生效

<!--[if IE]>

<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />

<![endif]-->

只在IE6以上版本生效

<!--[if gt IE 6]>

<link rel="stylesheet" href="/gt-ie6.css" type="text/css" media="screen" />

<![endif]-->

只在IE7上不生效

<!--[if ! IE 7]>

<link rel="stylesheet" href="/not-ie7.css" type="text/css" media="screen" />

<![endif]-->

非IE浏览器生效

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

<link rel="stylesheet" href="/no-ie.css" type="text/css" media="screen" />

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

2、常用的css hack代码

样式属性前缀法

.csshack{

background:blue;

background:blue\9; /*all ie*/

background:blue\0/; /*ie8-ie9*/

background/*\**/: blue\9; /* ie7-ie8*/

*background:blue;/* or #background: blue */ /*ie6-ie7*/

+background:blue; /*ie7*/

_background:blue; /*ie6*/

}

选择符前缀法

/* IE 7 */

*:first-child+html{}

/* IE 7 */

html > body #ie7  {  *display: block;  }

/* IE 6 */

* html #div{ }

/* IE 6 */

body #ie6  {  _display: block;  }

/*IE7及其更低版本*/

*:first-child+html{}*html{}

/*IE7,IE7以上和主流浏览器*/

html>body{}

/*适合主流浏览器(IE7排除在外，IE7以下的也不行)*/

html>/**/body{}

/* Firefox 1 - 2 */

body:empty #firefox12  {  display: block;  }

/* Firefox */

@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */

/* Safari */

@media screen and (-webkit-min-device-pixel-ratio:0)  {

#safari { display: block; }  }

/* Opera */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

3、IE条件注释并不是只用于样式表文件，它还有其它的形式来进行Hack。

IE条件注释与style标签：

<!--[if IE 6]>

<style type="text/css"> /* css for IE 6 */ </style>

<![endif]-->

IE条件注释与script标签：

<!--[if IE 6]>

<script type="text/javascript"> alert("我是IE6"); </script>

<![endif]-->

IE条件注释与html标签：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->

4、IE CSS Media

/* IE6/7 only (via Keith Clarke) */

@media screen\9 { }

/* IE8 (via Keith Clarke) */

@media \0screen { }

/* IE6/7/8 (via Keith Clarke) */

@media \0screen\,screen\9 {}

/* IE8/9/10 */

@media screen\0 { }

@media screen and (min-width:0\0) {

body { background: yellow; }

}

Hack技术的更多相关文章

  1. HTML兼容问题——HACK技术

    有话先说:本文的目的主要是向大家描述一下我们在遇见IE8版本一下以及Firefox兼容的问题. 针对不同的浏览器写不同的CSS的过程,这就叫CSS hack,也叫写CSS hack,相信您会对一些比较 ...

  2. openwrt-智能路由器hack技术（2）---"网路信息监控和窃取"

    openwrt-智能路由器hack技术(2)---"网路信息监控和窃取" 1   导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所 ...

  3. openwrt-智能路由器hack技术（1）---"DNS劫持"

    openwrt-智能路由器hack技术(1)---"DNS劫持" 1   导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所以现在整 ...

  4. Web前端技术研究：Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  5. CSS Hack技术详解，支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera

    转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...

  6. HTML的条件注释和hack技术

    在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...

  7. HTML的条件注释及hack技术

    在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...

  8. CSS Hack技术（一）

    这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技 ...

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

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

随机推荐

  1. 智能车学习（六）——OLED屏幕使用

    一.代码展示 1.头文件: #ifndef OLED_H_ #define OLED_H_ extern unsigned char Draw[]; extern const unsigned cha ...

  2. Jmeter 分布式性能测试

    作为一个纯 JAVA 的GUI应用,JMeter 对于CPU和内存的消耗还是很惊人的,所以当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至还会引起JAVA内存溢出的错 ...

  3. Liferay 6.2 改造系列之十一：默认关闭CDN动态资源

    在行业客户中,一般无法提供CDN服务,因此默认关闭CDN动态资源功能: 在/portal-master/portal-impl/src/portal.properties文件中,有如下配置: # # ...

  4. PhpMyAdmin管理，登录多台远程MySQL服务器

    法一: 可直接在config.inc.php里添加数据库连接信息即可 先$i++, 然后复制原来的配置信息后修改 不过这种方式需要将连接信息写在配置文件中,有点麻烦. 这种后面省事,不用填信息,选择一 ...

  5. Swift3.0语言教程字符串与文件的数据转换

    Swift3.0语言教程字符串与文件的数据转换 Swift3.0语言教程字符串与文件的数据转换,如果想要对字符串中的字符进行永久保存,可以将字符串中的字符写入到文件中.当然,开发者也可以将写入的内容进 ...

  6. 什么是智能扫描开单打印进销存POS?安卓工业手持PDA设备上的POS销售开单,现场打印打票，用扫描枪太方便了

    安卓PDA版POS销售开单如果和扫描枪配合使用,和超市的POS销售一样的操作 什么是智能扫描开单打印进销存POS? 互联网特性,让它在数据统计分析.客户关系管理等方面表现出众.智能POS,不仅是一个收 ...

  7. yii2.0 的数据的 增

    增加数据 /**     * 添加数据  controller 层     */ //引入对应的model类 use app\models\About; //定义对应的方法固定的actionxxxx ...

  8. JavaScript 参考手册——javascript本地和内置对象、BOM、DOM

    本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript 对象参考手册 本参考手册描述 ...

  9. Oracle执行计划

    建立与oracle的web程序,经常性出现sql性能不高导致的问题,比如程序好好的突然数据库查询变得很慢,几乎加载不了,这时候就有可能是oracle查询计划出错的原因. <sql id=&quo ...

  10. iOS之06-三大特性之继承

    继承 1.定义 继承是指一个对象直接使用另一对象的属性和方法. 继承:xx 是 xxx 2.实现 A { int _age; int _no; } B : A {// 继承的实现 int _weigh ...