分类目录归档:css

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

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

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

<!--[if lt IE 8]> <html class="no-js lt-ie9 lt-ie8" lang="en-us"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en-us"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-us"> <!--<![endif]-->

条件注释参考:https://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

来源:http://www.cnblogs.com/wuchao/archive/2012/07/18/2596867.html