什么是CSS hack_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:51:44
原创
1178人浏览过

由于不同的浏览器,比如internet explorer 6,internet explorer 7,mozilla firefox等,对css的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的css,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的css code的过程,就叫css hack,也叫写css hack。

css hack的原理是什么
由于不同的浏览器对css的支持及解析结果不一样,还由于css中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的css。

比如 ie6能识别下划线_和星号*,ie7能识别星号*,当不能识别下划线_,而firefox两个都不能认识。等等

书写顺序,一般是将识别能力强的浏览器的css写在后面。下面如何写里面说得更详细些。

如何写css hack
比如要分辨ie6和firefox两种浏览器,可以这样写:

 

Layx是一款网页弹窗Javript插件
Layx是一款网页弹窗Javript插件

Layx 是一款网页弹窗Javript插件,她将助力于互联网Web开发,提供优质的弹窗体验

Layx是一款网页弹窗Javript插件 32
查看详情 Layx是一款网页弹窗Javript插件
我在ie6中看到是红色的,在firefox中看到是绿色的。
 
解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在ie6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。


css hack:区分ie6,ie7,firefox
区别不同浏览器,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,firefox
background:orange;*background:green;_background:blue;

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

附:css的各种浏览器兼容一栏表


b{_flaot:left;} ie6
b{+flaot:left} ie6-7

b{float:left !important;} ie6-8b ff
b{float:right;}

b{float:left !important;float:right;} ie7-8b ff

/*\*//*/
b{float:left;} ie8b
/**/

html*b{float:left;} ie6-7

body>b{float:left;} ie7-8b ff

html[xmlns] b{float:left;} ie7-8b ff

b{/*/*/float:left;/* */} ie6-7 ff






   
不透明

   
半透明



本文转摘自『it学习者』http://www.itlearner.com/article/2009/4414.shtml
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号