CSS：IE，Chrome，Firefox兼容性和CSS Hack

最新推荐文章于 2024-07-18 13:52:01 发布

chumeng1878

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量63

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/u/1046828/blog/176978

版权

以前写过一篇关于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
{
background-color:pink;
}
}

=====

.hack{ 
color:#fff;background:#000; 
background:#06f\9;   /* all IE */ 
background:#090\0;   /* IE8-9 */ 
background:#090\0/;  /* IE8 only */ 
*background:#f60;    /* IE6-7 */ 
_background:#f00;    /* IE6 only */ 
}

=====

注意事项：
浏览器对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:

只要IE8读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。

转载于:https://my.oschina.net/u/1046828/blog/176978

chumeng1878

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：IE，Chrome，Firefox兼容性和CSS Hack

以前写过一篇关于CSS hack的文章，但近期回头看了看发现理解的不够深刻，总结的也不凝练，于是今天重新测试从新写一篇。常用的CSS hack如下（笔者只对IE&FF&Chrome进行了测试）。 hack列表（全部经笔者测试，且均为标准模式下，混杂模式由于很少会用...
复制链接

扫一扫