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 总结的更多相关文章
-
转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
-
浏览器的CSS Hacks
LZ注:此文原作者是:Paul Irish(Google的前端开发工程师),本文是原文的部分译文. 我不再使用CSS Hacks了,相反的是,我将使用IE的条件判断将类应用到body标签. 但是, ...
-
css hacks
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child ...
-
抛弃 CSS Hacks 后的浏览器兼容方案
一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本,当然在 IE9 开始逐步推向市场后,又会有更多的衍生版本.所以我目前只考虑 IE7~9 版本的兼容情况.涉及到的条件注释代码如下: & ...
-
纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
-
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
-
前端CSS规范整理_转载、、、
一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...
-
30+有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人 ...
-
前端面试——css篇
css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...
随机推荐
-
MVC Request.IsAuthenticated一直false Request.Cookie获取不到cookie
项目中,在做登录验证时,用到了cookie,同一账户登陆,可以.切换其他账号时,就在也登录不上了,用原来的也不行.检查Request.IsAuthenticated一直false,而且Request. ...
-
软件产品案例分析（K米 APP）
关于 K米 -- 的案例分析 产品 K米的APP (全国KTV点歌,手机直播,互动,交友,预订)的Android客户端 第一部分 调研,评测 评测: 上手体验 第一次用这一类的软件,之前去KTV的时候 ...
-
java基础知识回顾之---java String final类普通方法的应用之“子串在整串中出现的次数”
/* * 2 一个子串在整串中出现的次数. * "loveerlovetyloveuiloveoplove" * 思路: * 1,要找的子串是否存在,如果存在获取其出现的位置.这个 ...
-
[Javascript] Lodash: Refactoring Simple For Loops (_.find, _.findLast, _.filter)
This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style ...
-
atitit.标准时间格式 相互转换 秒数 最佳实践
atitit.标准时间格式 相互转换 秒数 最佳实践 例如00:01:19 转换为秒数 79,,and互相转换 一个思路是使用div 60 mod...只是麻烦的... 更好的方法是使用stamp ...
-
多文件上传插件Stream，是Uploadify的Flash版和Html5版的结合，带进度条，并支持html5断点续传(附件上传)，拖拽等功能
是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他) ...
-
Redis的快照持久化-RDB与AOF
Redis持久化功能 Redis为了内部数据的安全考虑,会把本身的数据以文件形式保存到硬盘中一份,在服务器重启之后会自动把硬盘的数据恢复到内存(redis)的里边. 数据保存到硬盘的过程就称为“持久化 ...
-
Android Studio安装时候遇到HAXM问题
之前抽风,把AS写在卸载掉了,再进行重装时候就爆炸了,一直提示下面这个错误: <一>failed to install Intel HAXM. For details, pleasse c ...
-
Android四大组件framework层
activity https://www.kancloud.cn/alex_wsc/android-deep2/413484 当前Activity Activity向AMS发送StartActivit ...
-
关于struts.xml配置文件的说明
<struts> <!-- action: 对应controller 中的类的 name: 匹配url要访问的类 class:包名+类名 通过反射产生对象 method:指定默认访问 ...