background:#835838;  filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.8; 设置背景颜色为透明!

IE6、 IE7、IE8、IE9、Firefox兼容性问题  2011-09-07

1.区别IE和非IE浏览器
#tip {
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
}

2.区别IE6,IE7,IE8,FF

【区别符号】:「\9」、「*」、「_」、「\0」
【示例】:
#tip {
background:blue; /*Firefox 背景变蓝色*/
background-color:red\0; /* ie 8/9*/     /*IE8 背景变红色*/
background-color:yellow\9\0; /* ie 9*/    /*IE9 背景变黄色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就 会让浏 览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (方法 1)

【区别符号】:「*」、「_」
【示例】:
#tip {
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器) 则完全 无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE6、IE7、Firefox (方法 2)

【区别符号】:「*」、「!important」
【示例】:
#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于 Firefox可以 读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox

【区别符号】:「*」、「!important」
【示例】:
#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}
【说明】:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因 此可以 两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (方法 1)

【区别符号】:「*」、「_」
【示例】:
#tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻 鬆区隔 IE6和IE7之间的差异。

7.区别IE6、IE7 (方法 2)

【区别符号】:「!important」
【示例】:
#tip {
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识 「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。

8.区别IE6、Firefox

【区别符号】:「_」
【示例】:
#tip {
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。

9.区别IE8、IE9

一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack.

因为IE8及以下版本是不支持CSS3的,但是我们如果使用css3,在IE下IE9正常渲染,但我们又想让IE8及以下的浏览器实现同样的效果,且不希望使用css3pie或htc或条件注释等方法时,可能就会需要用到IE8和IE9的专属css hack了.

.test{           color:#09F\0; /* IE8/9 */           color:#09F\0/; /* IE8 only */   }   :root .test { color:#963\9; } /* IE9 only */   /*或者下面的,但是下面的优先级小于上面的。Ps:老外的方法

个人记录比较好的css样式的更多相关文章

  1. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  2. css 样式 记录

    /* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...

  3. jquery操作CSS样式全记录

    $(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”); ...

  4. 对于一些css样式的巧妙方法进行总结。

    针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...

  5. HTML标记语言和CSS样式的简单运用(Nineteenth Day)

    曾经励志下去要坚持把每天所学的知识记录下来,可是坚持了几天后,就觉得自己坚持不下去了....这几天自己好好的想了想,觉得不能坚持也得要坚持,因为要对自己负责,所以得学会逼着自己去做,只有这样才能把一件 ...

  6. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

  7. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

  8. IIS发布,无法显示CSS样式和图片

    描述: 最近给同事安装web程序时,把IIS安装好后,发布网站时,图片和css样式不显示. 程序没问题,发布也没问题. 后来网上一查,出错的原因可能是IIS的配置问题. 果然,按照网上的方法,顺利显示 ...

  9. 靠谱的CSS样式

    0. 引言 记录一些用到的CSS样式,只要可以使用CSS3的地方都可以使用. 1. CSS样式 flex布局:引用 阮一峰的网络日志http://www.ruanyifeng.com/blog/201 ...

随机推荐

  1. python datetime模块

    该模块的时间有限时限:1 - 9999 dir(datetime)  from datetime import datetime, timedelta, timezone dt = datetime. ...

  2. 微信https请求工具类

    工作中用到的微信https请求工具类. package com.gxgrh.wechat.tools; import com.gxgrh.wechat.wechatapi.service.System ...

  3. (转载)MongoDB C#驱动中Query几个方法

    MongoDB C#驱动中Query几个方法 Query.All("name", "a", "b");//通过多个元素来匹配数组 Query ...

  4. python与C++交互

    python和C++能进行有效的交互,c++调用Python的一些小用法 写了一个python脚本导入发生异常,可能是编码问题(如存在中文),Python默认的是ASCII可加上:#!/usr/bin ...

  5. windows PHONE 开发-入门程序构筑

    1:页面的扩展名为:.xaml文件类似于ASPX一样可以编写客户端显示内容和后台处理内容 一般的前台页面的形式为: <Page x:Class="MyFirstApp.MainPage ...

  6. adeng朝花夕拾

    ============================C/C++基础拾遗===================================== 1.指针: 函数指针做函数参数 回调函数 语法现象 ...

  7. 为什么说invalidate()不能直接在线程中调用

      1.为什么说invalidate()不能直接在线程中调用?2.它是怎么违背单线程的?3.Android ui为什么说不是线程安全的?4.android ui操作为什么一定要在UI线程中执行? 1. ...

  8. 【Hector slam】A Flexible and Scalable SLAM System with Full 3D Motion Estimation

    作者总结了SLAM前端和后端的区别 While SLAM frontends are used to estimate robot movement online in real-time, the ...

  9. sql 删除数据库表 外键

    --/第1步**********删除所有表的外键约束*************************/   DECLARE c1 cursor for select 'alter table ['+ ...

  10. Mysql主从同步遇到的一些问题

    为提供更快的访问速度,在不同的地区增加了一台只供访问的从服务器.因此要将主服务器的数据全部备份过去,并且设置主从同步 假设: 主服务器IP:192.168.1.10 从服务器IP:192.168.1. ...