平面设计

网站技术

最新推荐

CSS hack 总结
2009/3/25 10:14:52 | 点击:0
一、 !important;
随着IE7对!important的支持,!important 方法现在只针对IE6的HACK,注意写法,记得该声明位置需要提前。 由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为从国外网站的翻译。新建一个css样式如下:
#item {
    width: 200px;
    height: 200px;
    background: red;
}

新建一个div,并使用前面定义的css的样式:

<div id="item">some text here</div>

在body表现这里加入lang属性,中文为zh:

<body lang="en">

现在对div元素再定义一个样式:

*:lang(en) #item{
    background:green !important;
}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

#item:empty {
    background: green !important
}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试:

ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux

 

按照原作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用。

<style>
#wrapper
{
width: 100px !important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

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

<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>

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

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

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; /*only IE*/
}

3.
用于内联css
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6 IE6可读,IE7与FF不可读,也就是针对IE6设置的hack*/

4.
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

书写顺序:
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
  以: " #demo {width:100px;} "为例;
  #demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
  * html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
  *+html #demo {width:130px;} /*会被IE7执行*/
  ---------------
  所以最后,#demo的宽度在三个浏览器的解释为:
  FIREFOX:100px;
  ie6:120px;
  ie7:130px;


三、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

四、区别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 "!"(选择条件版本以外所有版本,无论高低)

 

五、IE8的hack

 

以下的IE8均指IE8正式版,版本号:8.0.6001.18702。

 

"\9" 例:"margin:0px auto\9;"。这里的"\9"所有的IE都识别,但Firefox不识别。 "*" IE6、IE7可以识别。IE8、FireFox不能。 "_" IE6可以识别"_",IE7、IE8、FireFox不能。
代码实例:
.color{
 background-color: #CC00FF;  /*所有浏览器都会显示为紫色*/
 background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
 *background-color: #0066FF;  /*IE6、IE7会变为蓝色*/
 _background-color: #009933;  /*IE6会变为绿色*/
}
 
附图:

CSS hack浏览器兼容一览表:
common/upload/2009/3/25/162854sn.gif

 

 

文章来源:网络搜集整理

打印】【关闭
脱兔数据 - totodata.com -网页设计,页面设计,包装设计,VI设计,标志设计,营销策划,广告设计,卫生巾包装设计,卫生纸包装设计,生活用纸包装设计,纸尿裤包装设计,纸巾包装设计,湿纸巾包装设计
本站由 脱兔数据 - totodata.com 创建并提供技术支持!〖xiebr@sohu.com QQ:498983562〗