您的位置：首页 > Web前端 > CSS

CSS：IE，Chrome，Firefox兼容性和CSS Hack(转载)

2016-03-29 16:30 603 查看

原作者：微米博客

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

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

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

{

}

}

注意事项：

浏览器对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: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/
*        /*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兼容模式，保证页面完整展示。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航