网站css中必用的骇客技术

做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要。

区别不同浏览器的CSS hack写法:

区别IE6与FF:

background:orange;*background:blue;

区别IE6与IE7:

background:green !important;background:blue;

区别IE7与FF:

background:orange; *background:green;

区别FF,IE7,IE6:

background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;

IE6 IE7 FF

* √ √ ×

!important × √ √

------------------------------------------------------

另外再补充一个,下划线"_",

IE6支持下划线,IE7和firefox均不支持下划线。

IE6 IE7 FF

* √ √ ×

!important × √ √

_ √ × ×

于是大家还可以这样来区分IE6,IE7,firefox

: background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

CSS HACK

以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

#wrapper

{

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

width: 80px; /* IE6 */

}

2, IE6/IE77对FireFox

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

#wrapper

{

#wrapper { width: 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 fixed */

*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的...
    大女表哥阅读 1,146评论 0 9
  • 1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号...
    才気莮孒阅读 358评论 0 1
  • 1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号...
    aymincoder阅读 426评论 0 1
  • .Index_bottom { } /*通用*/ @media screen and (min-width:0) ...
    独与毒阅读 420评论 0 2
  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与F...
    年轻人多学点阅读 371评论 0 7