CSS hack由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，我们就需要针对不同的浏览器去写不同的CSS，让他能在不同的浏览器中也能得到我们想要的页面效果。

CSS hack 表现形式：

1.CSS类内部Hack。

2.选择器Hack。

3.HTML头部引用(if IE)Hack。

HTML头部引用写法：

<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->

<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->

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

<html class="no-js"> <!--<![endif]-->

这段代码包含了一些条件注释，它会根据浏览器的不同选择性地给<html>标记添加（或不添加）一个包含浏览器版本信息的class属性。

透过条件式类别名称的技巧，你的 CSS 内容就可以写成以下这样，也可以有效避免使用 CSS Hacks：

.lt-ie10 .arrow{

filter: FlipV;

}

CSS内部HACK

1.*：IE7及以下都能识别* ; 标准浏览器(如FF)不能识别*；

2.!Important：IE7和标准浏览器能识别*，IE6不能识别!important;

3.*+html：IE7 认 !important, 也认 *+html，且只有IE7认*+html。

优先度: (*+html + !important) > !important > +html；

4.下划线_;下划线的只有IE6认识 也只有IE6会处理这部分样式.

5.反斜杠：color:#0000FF\9; /*ie都识别*/

选择器HACK

1.IE6和早期的版本不支持“子选择器”(>)。

2.IE7增加了对子选择器的支持，但人当一个空的注释紧跟在子选择器的后面时无效。

子选择器加注释（>/**/）；

html >/**/ body p { color: blue; }

IE7以上版本及非IE浏览器颜色为blue，IE7为黑色。

盒模型HACK

IE9以及以下，padding值是加到width内部，盒子整体宽度不变。

解决方法：html头部加上<!doctype html>，表示统一采取W3C盒模型。

CSS Hacks 总结的更多相关文章

  1. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  2. 浏览器的CSS Hacks

    LZ注:此文原作者是:Paul Irish(Google的前端开发工程师),本文是原文的部分译文. 我不再使用CSS Hacks了,相反的是,我将使用IE的条件判断将类应用到body标签.   但是, ...

  3. css hacks

    /***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child ...

  4. 抛弃 CSS Hacks 后的浏览器兼容方案

    一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本,当然在 IE9 开始逐步推向市场后,又会有更多的衍生版本.所以我目前只考虑 IE7~9 版本的兼容情况.涉及到的条件注释代码如下: & ...

  5. 纯CSS无hacks的跨游览器多列布局

    利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...

  6. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  7. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  8. 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...

  9. 前端面试——css篇

    css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...

随机推荐

  1. mysql for python,银行转账模拟

    学习中, 本人为初学者.勿喷. #-*- coding:utf-8 -*- import MySQLdb class Tranferaccount(object): def __init__(self ...

  2. Spring ioc 原理

    java程序员都知道:java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成,通常,每个对象在使用他的合作对象时,自己均要使用像new object() 这样的语法来完成合作对象的申请工作.你 ...

  3. Unity GUI 用C#和Javascript写法的区别

    以前都是用C#来写Unity的GUI.后来因为团队需要GUI必须用C#写. 其实一开始学Unity的GUI的时候我是想用C#来写,后来折腾了好久也没弄出来.反倒是这次不经意间就搞好了. C#和Java ...

  4. Ubuntu12.04 下配置tomcat

    首先要配置好JDK,参考:http://www.cnblogs.com/yshyee/p/3352154.html 到http://tomcat.apache.org/download-60.cgi下 ...

  5. 转：Android模拟器连接电脑网络

    原文地址:http://www.it165.net/pro/html/201212/4444.html 第一步: 在命令行(就是开始——运行——输入cmd)模式下输入adb shell命令一般会报两种 ...

  6. Linux企业级项目实践之网络爬虫（13）——处理user-agent

    User Agent即用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头,是一种向访问网站提供你所使用的浏览器类型及版本.操作系统及版本.浏览 ...

  7. 同行blog收集

    姜楠:http://www.slyar.com/blog/ 赵劼:http://blog.zhaojie.me/ 研究者July:http://my.csdn.net/v_JULY_v 王卓群:htt ...

  8. NOI 2013 矩阵游戏

    http://uoj.ac/problem/124 矩阵乘法. 十进制快速幂. 刚开始还傻傻地写二进制快速幂,然后陈老师一语点醒梦中人...... #include<cstdio> #in ...

  9. 符号表实现（Symbol Table Implementations）

    符号表的实现有很多方式,下面介绍其中的几种. 乱序(未排序)数组实现 这种情况,不需要改变数组,操作就在这个数组上执行.在最坏的情况下插入,搜索,删除时间复杂度为O(n). 有序(已排序)数组实现 这 ...

  10. c语言筛选质数

    #include <stdio.h> #include <stdlib.h> #include <math.h> int isit(int num) { int i ...