何谓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. 【spring-quartz】 定时调度,时间设置

    .   CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 1 ...

  2. fibonacci 斐波那契数列

    1.小兔子繁殖问题  (有该问题的详细来由介绍) 2.台阶问题 题目:一个人上台阶可以一次上一个或者两个,问这个人上n层的台阶,一共有多少种走法. 递归的思路设计模型: i(台阶阶数)         ...

  3. RAC 集群更换IP

    RAC 集群更换 IP 主要分三步:停集群服务.配置服务器网络.修改集群配置.下面是同网段内更换 IP 示例.(r7.r8为服务器名称,orcl为ORACLE_SID,scanip为 scan 名称) ...

  4. MySQL redo lock 死锁问题排查 & 解决过程

    版权声明:本文由张青林原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/181 来源:腾云阁 https://www.qclo ...

  5. 【hdu2196】Computer

    hdu 2196 computer 题意 给你一棵树,边有权值. 对于每一个点,求其与其距离最远的点的距离. 分析 思路1:树的直径 利用直径的性质进行求解,网上资料很多,这里不赘述. #includ ...

  6. Android Drawable资源

    Android实现应用d动画效果:比如App第一次打开的开始动画等 有两种:GIF动画和代码实现. 第一种:借助于Gif制作工具软件实现.一般是和第三方开源的GifView(https://githu ...

  7. 用java实现冒泡排序法

    一.基本思路: 冒泡排序是一种简单的交换类排序.其基本思路是,从头开始扫描待排序的元素,在扫描过程中依次对相邻元素进行比较,将关键字值大的元素后移.每经过一趟排序后,关键字值最大的元素将移到末尾,此时 ...

  8. 在Windows Azure上搭建SSTP VPN

    在国内,VPN是用来干嘛的大家都懂的.很久之前我尝试用Azure的Virtual Network搞VPN结果惨败了.最近微博上有基友写了篇文章亲测可行,原文在这里.可惜是英文的.所以我的这篇文章仅仅是 ...

  9. linux下shell统计文件目录下所有代码行数

    功能,统计某一目录下所有文件代码行数: 例如统计某一目录下所有.c结尾的文件代码行数:find . -name "*.c"|xargs cat|grep -v ^$|wc -l ^ ...

  10. Linux编程

    头文件一般位于usr/include目录下,各个子类的头文件位于include子目录下 不知道某个“库函数”需要哪些头文件,使用“man 函数”即可查看 sys/types.h  基本系统数据类型 s ...