网页制作了解什么是CSS hack?
发布时间:2007-10-21 08:52:00
由于不同的浏览器,比如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两种浏览器,可以这样写:
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>
解释一下:
上面的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;
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
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
div{: background:orange;
*background:green;
_background:blue;}
div{: background:orange;
*background:green;
_background:blue;}
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 先前在DW教学-Dreamweaver量身打造Wordpress留言板(一) 教学文章中,已经成功的把前端留言机制与界面搞定了,虽然有了留言
- 一.基本数据类型整数:int字符串:str(注:\t等于一个tab键)布尔值: bool列表:list 列表用[]元祖:tuple元祖用()
- 前言本篇文章主要讲解vue响应式原理的逻辑,也就是vue怎么从最开始一步步推导出响应式的结构框架。 先从头构建一个简单函数推导出Vue3的R
- 好久没写了,就把上课做的一个小东西拿出来分享一下吧。百度网页截图如下 ↓↓↓程序运行输出结果截图 ↓↓↓上代码 ↓↓↓from lxml i
- 本文实例讲述了php实现图片转换成ASCII码的方法。分享给大家供大家参考。具体如下:php图片转换成ASCII码,转换后可以直接通过字符串
- 实例如下:import os if __name__ == "__main__": file_path =
- 前言最近需要源码部署一个项目,因此探索一下保护源码的方式,由简单到复杂主要总结为以下三大类:代码混淆:主要是改变一些函数名、变量名代码打包:
- 看到标题就知道有逗比忘了密码。。。没错就是我。你也忘了密码? 不要着急!0x00:第一步:运行django shellpython3 man
- 今天来说一下如何判断字典中是否存在某个key,一般有两种通用做法,下面为大家来分别讲解一下:第一种方法:使用自带函数实现。在python的字
- 1 什么是注释注释就是对代码的解释和说明,其目的是让人们能够更加轻松地了解代码。注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释
- 目录1、股票数据2、数据处理3、绘制K线4、去除图中非交易日5、在K线图中,添加成交量K线图简介:K线图又被成为“蜡烛图”、“阴阳线”等,它
- defer介绍defer是golang的一个特色功能,被称为“延迟调用函数”。当外部函数返回后执行defer。类似于其他语言的 try… c
- 本文实例为大家分享了Mysql实现通讯录的具体代码,供大家参考,具体内容如下#-*-code:utf-8-*-import pymysqld
- 最近在学习Vue.js,把自己遇到的问题做个记录,所以,今天添加一点小笔记。在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不
- 一、查询某个字段重复 select * from User u whe
- 自己做了一个asp页面,用了一个td来显示留言本的最新消息;但是却无法控制其排版问题,因为该td的width确定,但是数据库中的文字却是未知
- 该脚本的功能是卸载android手机中安装的所有第三方应用,主要是使用adb shell pm、adb uninstall 命令,所以使用的
- 阅读上一篇:网马解密大讲堂——网马解密初级篇今天主要讲解的内容是Freshow工具的使用方法,工欲善其事,必先利其器,首先要学会如何使用解密
- 本文主要给大家介绍了关于CentOS 6.5 安装Python 3.5.2并与Python2并存的相关内容,分享出来供大家参考学习,下面来看
- 前言本文通过示例给大家详细介绍了关于python打印三角形的相关,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧1、直角三角