所有浏览器 通用 height: 100px;

IE6 专用 _height: 100px;

IE7 专用 *+height: 100px;

IE6、IE7 共用 *height: 100px;

IE7、FF 共用 height: 100px !important;

例如:

#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */

下面的这种方法比较简单

举几个例子:

1、IE6 - IE7+FF

#example {

height:100px; /* FF+IE7 */

_height:200px; /* IE6 */

}

其实这个用上面说的第一种方法也可以

#example {

height:100px !important; /* FF+IE7 */

height:200px; /* IE6 */

}

2、IE6+IE7 - FF

#example {

height:100px; /* FF */

*height:200px; /* IE6+IE7 */

}

3、IE6+FF - IE7

#example {

height:100px; /* IE6+FF */

*+height:200px; /* IE7 */

}

4、IE6 IE7 FF 各不相同

#example {

height:100px; /* FF */

_height:200px; /* IE6 */

*+height:300px; /* IE7 */

}

或:

#example {

height:100px; /* FF */

*height:300px; /* IE7 */

_height:200px; /* IE6 */

}

需要注意的是,代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面

解释一下4的代码:

读代码的时候,第一行height:100px; 大家都通用,IE6 IE7 FF 都显示100px

到了第二行*height:300px; FF不认识这个属性,IE6 IE7都认,所以FF还显示100px,而IE6 IE7把第一行得到的height属性给覆盖了,都显示300px

到了第三行_height:200px;只有IE6认识,所以IE6就又覆盖了在第二行得到的height,最终显示200px

这样,三个浏览器都有自己的height属性了.

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

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

CSS HACK的方法的更多相关文章

  1. CSS Hack技术(一)

    这世间坑爹的东西不少,浏览器可以算做一件,尤其的IE浏览器.关于浏览器的吐槽已经有不少了,我也就不在这添油加醋了.不过吐槽终究只是泄一时之愤,解决问题才是关键,今天我们就来讲一讲浏览器(样式)兼容的技 ...

  2. CSS兼容性解决方法!important的IE7,Firefox问题

    转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...

  3. CSS之Medial Queries的另一用法:实现IE hack的方法

    所谓Medial Queries就是媒体查询. 随着Responsive设计的流行,Medial Queries可算是越来越让人观注了.他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设 ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. Safari的CSS HACK方法

    以前的文章里提到过IE6/IE7/IE8/IE9/.Firefox的CSS HACK方法,那么Safari的CSS HACK是什么呢?   请看以下CSS代码: .box { color: black ...

  6. css hack方法总结

    IE6识别:下划线 _ 和 星号 *IE7识别:星号 *IE6-IE10识别: \9 css hack方式,条件注释法<!--[if IE]>这段文字只在IE浏览器显示<![endi ...

  7. IE7,6与Fireofx的CSS兼容性处理方法集结

    CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...

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

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

  9. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

随机推荐

  1. JAVA去掉字符串前面的0

    最佳方案:使用正则 String str = "000000001234034120"; String newStr = str.replaceAll("^(0+)&qu ...

  2. SunDay天气——开放源代码

    前段时间也些小忙,一直没有时间去弄Github,所以源代码一直没有放出来. 本周末特抽了些时间出来,熟悉了下Github,并把源代码给弄了去.欢迎大牛重吐槽.指导...... 费话不多说,上图. 近期 ...

  3. guice框架的入门使用

    guice框架是一种类似于spring的ioc容器的一种框架,使用简单,比較轻量级的一个框架,速度极快,灵活性极强,如今就先来写几个guice的程序. 在这里我就不给出guice的jar包,这些都能够 ...

  4. cubietruck+ vncserver+source+wlan0 分类: cubieboard 2014-11-08 17:25 159人阅读 评论(0) 收藏

    正常ubuntu下直接搜索remote desktop 进行配置,好用而且友好.. modprobe bcmdhd lsmod ifconfig wlan0 up vi /etc/network/in ...

  5. 深入N皇后问题的两个最高效算法的详解 分类: C/C++ 2014-11-08 17:22 117人阅读 评论(0) 收藏

    N皇后问题是一个经典的问题,在一个N*N的棋盘上放置N个皇后,每行一个并使其不能互相攻击(同一行.同一列.同一斜线上的皇后都会自动攻击). 一. 求解N皇后问题是算法中回溯法应用的一个经典案例 回溯算 ...

  6. Qt 学习之路 :菜单栏、工具栏和状态栏

    在之前的<添加动作>一文中,我们已经了解了,Qt 将用户与界面进行交互的元素抽象为一种“动作”,使用QAction类表示.QAction可以添加到菜单上.工具栏上.期间,我们还详细介绍了一 ...

  7. C# 内存管理优化畅想(二)---- 巧用堆栈

    这个优化方法比较易懂,就是对于仅在方法内部用到的对象,不再分配在堆上,而是直接在栈上分配,方法结束后立即回收,这将大大减轻GC的压力. 其实,这个优化方法就是java里的逃逸分析,不知为何.net里没 ...

  8. Java 406

    项目改名之后, 项目上传后,报错,406,可是项目本地是可以跑起来的, 联系管理员,管理员改了个/etc/httpd/conf/workers2.properties 里面,将本次的项目加入进去就OK ...

  9. Tomcat-java.lang.IllegalArgumentException: Document base F:apps does not exist or is not a readable

    启动Tomcat的时候,报错:java.lang.IllegalArgumentException: Document base F:apps does not exist or is not a r ...

  10. Hadoop的读写类调用关系_图示