原作者:微米博客

以前写过一篇关于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 >www.mycsu.net </div>

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

相关文章:

  • 2021-07-01
  • 2022-01-08
  • 2021-12-12
  • 2022-01-16
  • 2021-12-20
  • 2021-06-30
  • 2021-10-19
  • 2021-11-22
猜你喜欢
  • 2021-09-25
  • 2022-01-10
  • 2021-10-19
  • 2021-09-11
  • 2021-11-01
  • 2021-12-20
  • 2021-07-23
  • 2021-11-13
相关资源
相似解决方案