CSS:IE,Chrome,Firefox兼容性和CSS Hack

时间:2022-08-26 14:45:05

 最近网站改版,以前一直写后台,现在面临很多页面的东西,要写的样式也越来越多,慢慢的知道了HACK,也用的多了,记录一下常用的HACK,方便以后再写css的时候来查阅。

     CSS兼容性一直是大家头疼的问题,IE6、IE7、FF、chrome已经让大家够呛,在52CSS.com以前的文章中,很多这方面的知识介绍,今天向大家介绍IE8的CSS hack。
      IE8 正式版发布以来,一直在找一种区别IE8测试版的方法.在百度搜索"IE8 hack"有19万多个结果,google搜索则有243万多个结 果,但几乎没有看到任何一种有效的方法是针对IE8正式版的,要知道IE8正式版和测试版在hack上是有很大区别的.而且网络上的方法几乎都是出自一两个人之手,最有名的可能要数那张linxz.cn的hack图片了,这张图片估计被国内的网友转载了几十万次,但目前这张图里的方法对IE8正式版是无效的。


经过分析和总结网友们的各个无效方法,有了下面的行之有效的解决方案,或许以后还会有更好更简单的hack,但就目前来说这个方法可以解决燃眉之急.
不再讲废话,来看实例(以下的IE8均指IE8正式版,版本号:8.0.6001.18702):
"\9" 例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.

如此,就可以完全区分开IE6、IE7、IE8、FireFox了.
还是不知道怎么区分.好吧,来看个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>区别IE6、IE7、IE8、FireFox的CSS hack - http://www.52css.com%3c/title>
<style type="text/css">
<!--
#test,#note{
    margin:0 auto;
    text-align:center;   
}
#test {
    width:200px;
    height:30px;
    border: 1px solid #000000;
    color:#fff;
    line-height:30px;
}
.color{
    background-color: #CC00FF;        /*所有浏览器都会显示为紫色*/
    background-color: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/
    *background-color: #0066FF;        /*IE6、IE7会变为蓝色*/           
    _background-color: #009933;        /*IE6会变为绿色*/
}
-->
</style>
</head>

<body>
<div id="test" class="color">测试方块 www.mycsu.net </div>

<div id="note">
    <strong style="color:#009933">IE6</strong>
    <strong style="color:#0066FF">IE7</strong>
    <strong style="color:#FF0000">IE8</strong>
    <strong style="color:#CC00FF">FireFox</strong>
</div>
</body>
</html>

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

background: red;       /* 对FF Opera和Safari有效 */
#background: blue;      /* 对 IE6 和 IE7有效 */
_background: green;      /* 只对IE6有效 */
/*/background: orange;*/      /** 只对IE8有效 **/

!important         /*FF、IE7有效*/

*         /*IE都有效*/

============================================================

IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式
只需要在页面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。

网站改版确实很头疼:www.mycsu.net