何谓CSS Hack?

不同的浏览器,比如Internet Explorer 6、Internet Explorer 7、 Mozilla Firefox对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。此时我们需要针对不同的浏览器写不同的CSS,让它能够兼容不同的浏览器,能够在不同的浏览器中得到我们想要的页面效果。针对不同浏览器编写不同CSS code的过程就叫CSS Hack,或叫写CSS Hack。

不同浏览器对CSS解析的差别如下:

  • !important能被IE7、FF识别,但不能被IE6识别
  • IE6支持"*" or "_"开头的CSS,IE7支持"*"开头的CSS,但不支持"_"开头的CSS,FF两者都不支持
  • "+"开头的CSS样式仅能被IE7识别
  • "\0"结束的CSS样式仅能被IE8识别
  • "\9"的CSS样式能被IE识别

【书写顺序:针对FF的样式放在最前面,针对IE7的样式放在中间,针对IE6的样式放在最后 】

1. !important

!important 指定样式应用规则的优先权,区别IE6与IE7,区别IE6与其它浏览器。

.browserTest 

    border:20px solid #60A179 !important;
    border:20px solid #00F;

IE7和其它标准浏览器能识别!important,显示#60A179颜色,IE6不能识别!important,显示#00F颜色。

2. *

IE都能识别"*",标准浏览器(如FF)不能识别"*"。

区别IE与FF:

.browserTest  {    border:20px solid #60A179;         *border:20px solid #00F;}

区别IE6、IE7、FF:

.browserTest
{
    border:20px solid #60A179;
    border:20px solid #00F !important;
    *border:20px solid #fff;

3. _

IE6支持"_",IE7和FF都不支持"_" 。区别IE6、IE7、FF:

.bowserTest {           border:20px solid #60A179;    *border:20px solid #00F;       _border:20px solid #fff;}

4. *+html 与 *html

*+html 与 *html 是IE特有的标签, firefox 暂不支持。而*+html 又为 IE7特有标签

.browserTest { width: 120px; }      /* FireFox fixed */ 
*html .browserTest { width: 80px;}  /* ie6 fixed */ 
*+html .browserTest { width: 60px;} /* ie7 fixed */

*+html 对IE7的HACK 必须保证HTML顶部有如下声明:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

CSS Hack及常用的技巧的更多相关文章

  1. CSS書寫規範及CSS Hack

    基本原则: CSS样式可细分为3类:自定义样式.重新定义HTML样式.链接状态样式. 样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定. 样式名 “.”+“相 ...

  2. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

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

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

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

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

  5. CSS hack常用方案(摘选)

    邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...

  6. 常用的CSS Hack

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

  7. 常用的CSS Hack技术集锦

    来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...

  8. CSS hack技巧

    CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...

  9. 常用CSS HACK

    常用CSS HACK IE6 3像素bug和双边距bug一样的经典 现象: IE6下浮动元素和不浮动元素之间会有3px间隙(3px bug,div.float-left + div.float-non ...

随机推荐

  1. Windows不重启就使环境变量修改生效

    以修改环境变量“PATH”为例,修改完成后,进入DOS命令提示符,输入:set PATH=C: ,关闭DOS窗口.再次打开DOS窗口,输入:echo %PATH% ,可以发现“我的电脑”->“属 ...

  2. Windows下DLL查找顺序

    目录 第1章说明    2 1.1 查找顺序    2 1.1.1 检查DllCharacteristics字段    3 1.1.2 读取manifset资源    3 1.1.3 读取manifs ...

  3. MHA的几种死法-叶良辰

    master不通      找到最新slave           找到有所有其他slave缺失relay log的 slave      选主           配置文件指定           ...

  4. Java位操作全面总结

    转载: Java位操作全面总结 在计算机中所有数据都是以二进制的形式储存的.位运算其实就是直接对在内存中的二进制数据进行操作,因此处理数据的速度非常快.在实际编程中,如果能巧妙运用位操作,完全可以达到 ...

  5. 核心Javascript学习

    1. 引言: 1.1. 网页三要素: l HTML(内容) l CSS(外观) l Javascript(行为) 1.2.  OOP的相关概念 1). 对象,方法和属性 l 对象就是指"事物 ...

  6. 用ildasm/ilasm修改IL代码

    原文地址:http://www.cnblogs.com/dudu/archive/2011/05/17/ildasm_ilasm_il.html 在开发中遇到这样一个场景,需要修改一个dll文件(.N ...

  7. JavaScript:闭包

    根据MDN上的解释『闭包是指函数有自由独立的变量.换句话说,定义在闭包中的函数可以“记忆”它创建时候的环境.』 闭包有两个主要的作用: 1.访问内部函数的局域变量: 2.将创建的变量永久保存在内存中, ...

  8. sqlserver 修改替换text,ntext类型字段的两种方案

    方案一 用Update和Replace --替换语句(因为varchar(max)最大值是8000,所以大于8000的部分会被截掉) UPDATE dbo.SNS_UserBlog SET [Desc ...

  9. java二维数组简单初步理解

    二维数组 二维数组本质上是以数组作为数组元素的数组,即“数组的数组”. int[][] arr = {{1, 2, 3}, {4, 5, 6}}; System.out.println(arr[0][ ...

  10. 下载模板,上传EXCEL

    说道SAP里对EXCEL操作的大概就是上传,下载,显示了... 下载:(文档是通过SMW0上传的)注:如果下载的时候需要填充EXCEL的值,...请参考另一篇文档,OLE CALL METHOD CL ...