何谓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. 值类型,引用类型,栈,堆,ref,out

    在网上收集... C#的值类型,引用类型,栈,堆,ref,out C# 的类型系统可分为两种类型,一是值类型,一是引用类型,这个每个C#程序员都了解.还有托管堆,栈,ref,out等等概念也是每个C# ...

  2. JavaScript数学揭密之函数与勾股定理

    一.函数 function show(n){ return n*2; } alert( show(2) ); alert( show(3) ); alert( show(4) ); 二.勾股定理 1. ...

  3. entity refenrece 在views中的运用

    在一个content type中有一个field是entity reference, 那么这个字段的设置过程中会指定一个entity type和content type和一个具体内容的选择器, 然后到 ...

  4. mysql spider之拆库无忧

    数据库的三板斧 先上MySQL,之后再上读写分离,然后呢? 后面典型的做法是垂直拆库和水平分表. 一旦数据库拆了之后,代价就来了. 1.事务不能跨库了(少,但是很重要,可以适当改写) 2.相关的关联查 ...

  5. controller 监控Unix性能信息

    linux系统需要有RPC(Remote Procedure Call Protocol),远程过程调用协议,通过安装rpc.rstatd程序,启动其服务,就可以给远程机器提供信息,即Lr可以获取到该 ...

  6. 关于http响应内容压缩的一点小积累。

    1.在tomcat的server.xml配置文件中,添加上背景颜色为绿色的配置,服务器就会自动压缩 <Connector port="80" maxHttpHeaderSiz ...

  7. Git入门及上传项目到github中

    最近需要将课设代码上传到Github上,之前只是用来fork别人的代码. 这篇文章写得是windows下的使用方法. 第一步:创建Github新账户 第二步:新建仓库 第三部:填写名称,简介(可选), ...

  8. Leetcode--Add two number

    地址:https://leetcode.com/problems/add-two-numbers/ 代码: class Solution { public: ListNode* addTwoNumbe ...

  9. 第四周 更新Scrum站立会议

    项目名称:连连看游戏(C#) 小组名称:4Boys 小组成员:武志远.李权.张金生.张政 站立会议内容 昨天完成的: 1.张金生主要介绍了自己完成了游戏界面 2.武志远主要负责查阅关于技术方面的资料, ...

  10. 张艾迪(创始人):出现在世界224C之前的这些时间

    出现在世界224C之前的这些时间 坐在大巴车上.用手塞住耳朵.繁杂的大巴车上.总会听见不喜欢听的声音.那时只有22.23岁的我.就像发明一些东西把所有不喜欢的声音都屏蔽掉.就像防火墙一样.那时候拥抱所 ...