原作者：微米博客

以前写过一篇关于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兼容模式，保证页面完整展示。

　　　　

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

CSS：IE，Chrome，Firefox兼容性和CSS Hack(转载)的更多相关文章

  1. 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack

    Firefox的CSSHack 只在Firefox上应用的CSS Hack,虽然这种情况非常少,但有时也会碰到: @-moz-document url-prefix() { .cssSelector ...

  2. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  3. CSS HACK区别IE6、IE7、IE8、Firefox兼容性

    相信不少人,都特别清楚CSS HACK,而其中也是区别IE6.IE7.IE8.Firefox兼容性问题用的,CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样. ...

  4. CSS对浏览器的兼容性(IE和Firefox)技巧整理

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  5. CSS区分Chrome和Firefox

    CSS区分Chrome和FireFox 描述:由于Chrome和Firefox浏览器内核不同,对CSS解析有差别,因此常会有在两个浏览器中显示效果不同的问题出现,解决办法如下: /*Chrome*/ ...

  6. CSS对浏览器的兼容性常见处理方式小结

    CSS技巧 1.div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了. 缺点:要控制内 ...

  7. 高效CSS書寫規範及CSS兼容性

    一.選擇器針對性說明 某一元素的多个规则集中,选择器的针对性越高,该规则集的权重也就越高.针对性相同的,后出现的规则集的权重更高. * {} /* a=0 b=0 c=0 d=0 -> spec ...

  8. CSS兼容IE Firefox问题与解决方法

    一.双边距问题浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍.解决方法:在此浮动元素增加样式  display:inline; 二.图片产生的间隙父元素直接包含<im ...

  9. marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

随机推荐

  1. Firefox火狐广告过滤插件Adblock Plus过滤规则包[中文维护小组]

    如果你经常使用Firefox火狐浏览器那么一定知道Adblock Plus这款广告过滤插件,功能非常强大,但是Adblock Plus广告过滤插件自带的过滤规则并不多,而且也不太适合我们中国的网站,在 ...

  2. cv2.threshold 阈值灰度

    threshold函数的使用 图像的二值化就是将图像上的像素点的灰度值设置为0或255,这样将使整个图像呈现出明显的黑白效果.在数字图像处理中,二值图像占有非常重要的地位,图像的二值化使图像中数据量大 ...

  3. processing制作动态山水背景

    效果代码 float theta, step; int num=5, frames = 1200; Layer[] layers = new Layer[num]; // void setup() { ...

  4. 读书笔记-《深入理解Java虚拟机：JVM高级特性与最佳实践》

    目录 概述 第一章: 走进Java 第二章: Java内存区域与内存溢出异常 第三章: 垃圾收集器与内存分配策略 第四章: 虚拟机性能监控与故障处理 第五章: 调优案例分析与实战 第六章: 类文件结构 ...

  5. 使用jquery.ajax实现省市的二级联动(SSH架构)

    首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...

  6. debian常用指令

    查看软件xxx安装内容 dpkg -L xxx 查找软件 apt-cache search 正则表达式 查找文件属于哪个包 dpkg -S filename apt-file search filen ...

  7. Tarjan算法 详解+心得

    Tarjan算法是由Robert Tarjan(罗伯特·塔扬,不知有几位大神读对过这个名字) 发明的求有向图中强连通分量的算法. 预备知识:有向图,强连通. 有向图:由有向边的构成的图.需要注意的是这 ...

  8. nginx url rewrite break和last的区别

    break 将重写的URI作为一个新的URI,在本块中继续处理,将重写后 的地址在当前location块中处理,不会将新的URI转向到其他location块中 last,终止继续在本location块 ...

  9. PHP四种序列化方案

    原文地址:https://t.ti-node.com/thread/... 数据的序列化是一个非常有用的功能,然而目测很多人跟我一样,在刚接触这玩意的时候压根就不理解这货色到底是干啥用的,反正老师说了 ...

  10. vue组件：canvas实现图片涂鸦功能

    方案背景 需求 需要对图片进行标注,导出图片. 需要标注N多图片最后同时保存. 需要根据多边形区域数据(区域.颜色.名称)标注. 对应方案 用canvas实现涂鸦.圆形.矩形的绘制,最终生成图片bas ...