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

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

原作者:微米博客

以前写过一篇关于CSS hack的文章,但近期回头看了看发现理解的不够深刻,总结的也不凝练,于是今天重新测试从新写一篇。常用的CSS

hack如下(笔者只对IE&FF&Chrome进行了测试)。

hack列表(全部经笔者测试,且均为标准模式下,混杂模式由于很少会用到所以未对其进行测试):

 

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

 

其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。此外Firefox和Chrome也有它们专有的hack,详细hack方式及使

用示例如下:

Firefox:

@-moz-document url-prefix()    /*写在选择器外层时(只可写在此处):Firefox only*/

Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0)    /*写在选择器外层时(只可写在此处):Chrome only*/

使用示例-写在选择器前面:

 

//注意:下面红色部分重点

@-moz-document url-prefix()    /*Firefox*/

{

        body

        {

                background-color:pink;

        }

}

注意事项:

浏览器对css的解析是从前到后的,并且采用最后一个样式声明。

 还是不知道怎么区分.好吧,来看个例子:

<!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兼容模式,保证页面完整展示。

(如有问题到博主网站 blog.uoolo.com 或 wuchao.cnblogs.com 留言)