聚会的目的在线观看 聚会的目的无删减 琪琪看片网,青青青爽在线视频观看在线观看 青青青爽在线视频观看 聚会的目的在线观看 聚会的目的无删减 琪琪看片网,青青青爽在线视频观看在线观看 青青青爽在线视频观看

发布日期:2021年10月25日
网站首页聚会的目的在线观看 聚会的目的无删减 琪琪看片网,青青青爽在线视频观看在线观看 青青青爽在线视频观看 |公司介绍|服务项目 | 作品展示|联系方式
聚会的目的在线观看 聚会的目的无删减 琪琪看片网,青青青爽在线视频观看在线观看 青青青爽在线视频观看
首页>>设计技巧设计技巧
CSS hack 详解——廊坊网页制作

由于不同的浏览器,比如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两种浏览器,可以这样写:
程序代码

   1. <style>  
   2. div{  
   3.     background:green;   
   4.     *background:red;     
   5. }  
   6. </style>  
   7. <div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>  


<style> div{ background:green; *background:red; } </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;

区别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 HACK总结一下。

1, !important

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

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>


2, IE6/IE77对FireFox
1.
*+html 与 *html 是IE特有的标签, firefox 暂不支持.
而*+html 又为 IE7特有标签.
程序代码

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>


注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明,
程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">


2.
表达方式:+property:value
测试环境:IE5,IE6 ,IE7,FF1.5,FF2.0,Opera 9,Safari 2
测试结果:
IE5,IE6 ,IE7浏览器识别;
FF2.0,Opera 9,Safari 2浏览器不识别。

结论:我们可以用"+"来实现只有IE识别的CSS Hack。

聚会的目的在线观看 聚会的目的无删减 琪琪看片网,青青青爽在线视频观看在线观看 青青青爽在线视频观看 比如我们要实现在IE中500px的宽度,而在其他浏览器480px的宽度,就可以通过"+" Hack来完成,如下:
程序代码

#hack {
width:500px;
+width:480px;
}


3.
用于内联css
程序代码

height:20px;
*height:25px;
_height:20px;


4.
程序代码

#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }


3,IE7的hack

IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是:
程序代码

>body
html*
*+html


这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被被忽略,但是 IE7 却不这么认为。对于 >body ,它会将缺失的选择符用全局选择符 * 代替,也就是将其处理成了 *>body,而且不光对于 > 选择符,+,~ 选择符中这个现象也存在。对于 html* ,由于 html 和 * 之间没有空格,所以也是一种 CSS 语法错误,但 IE7 不会忽略,而是错误地认为这里有一个空格。对于第三种 *+html,IE7 认为 html 前面的 DTD 声明也是一个元素,所以 html 会被选中,这三种方法中只有这一种方法是合法的 CSS 写法,也就是说可以通过校验器的验证,因此也是作者推荐的 hack 用法。
程序代码

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>body {} to select the body element


4,区别IE的版本
程序代码

<!--[if IE]> Only IE <![endif]-->
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
<!--[if lt IE 6]> Only IE 6- <![endif]-->
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
聚会的目的在线观看 聚会的目的无删减 琪琪看片网,青青青爽在线视频观看在线观看 青青青爽在线视频观看

注意
1.条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3. 条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。我很想把所有特殊的样式放在logo.css里。但是很不幸的是,这看起来不太可能。我也试过根据条件注释,使用来导入一个额外的样式表,但是因为我只需要一个额外的样式规则,这样会让事情变得复杂很多。当然如果你需要在IE里使用很多的额外的样式,那么使用或许是一个好的方法。
就象这样:

程序代码
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->


For Non-IE:
在注释中嵌套注释,这样首尾还原为两个注释,所以非IE浏览器可以显示中间的内容;而IE识别到“!IE”,所以将整个语句当成否定条件判断而不显示中间的内容。利用这样的用法即可在非IE中应用 Conditional Comments,酷!
程序代码

<!--[if !IE]><!--> COOL!!! Non-IE <!--<![endif]-->
<!--[if IE 6]><!--> IE6 or Non-IE <!--<![endif]-->


说明:

gt: greater than,选择条件版本以上版本,不包含条件版本
lt: less than,选择条件版本以下版本,不包含条件版本
gte: greater than or equal,选择条件版本以上版本,包含条件版本
lte : less than or equal,选择条件版本以下版本,包含条件版本
!: everything except what directly follows the "!"(选择条件版本以外所有版本,无论高低)

版权所有 © 2010-2012 廊坊易路设计公司 冀ICP备09040021号地址:廊坊市建国道东方新天地427室 邮箱:quanmiao@yahoo.cn