`

CSS hack:区分IE6,IE7,firefox

    博客分类:
  • CSS
阅读更多

区别IE6FF
       background:orange;*background:blue;

区别IE6IE7:      
       background:green !important;background:blue;


区别IE7FF
       background:orange; *background:green;


区别FFIE7IE6
       background:orange;*background:green !important;*background:blue;


注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;


                 IE6 IE7 FF
*               √    √    ×
!important ×    √   √


--------------------------------------------------------------------------------
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。(推荐)

于是大家还可以这样来区分FFIE7IE6
       background:orange;*background:green !important;*background:blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。


第一种,是CSS HACK的方法

height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

注意顺序。

这样也属于CSS HACK,不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

第二种是使用IE专用的条件注释
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

第三种css filter的办法,以下为经典从国外网站翻译过来的。.

新建一个css样式如下:

#item {
     width: 200px;
     height: 200px;
     background: red;
}
新建一个div,并使用前面定义的css的样式:

<div id="item">some text here</div>

在body表现这里加入lang属性,中文为zh:

<body lang="en">

现在对div元素再定义一个样式:

*:lang(en) #item{
     background:green !important;
}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

#item:empty {
     background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。

个人比较常用第一种,如下:
程序代码

height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

分享到:
评论

相关推荐

    简单CSShack:区分IE6、IE7、IE8、Firefox、Opera().pdf

    在《简单CSShack:区分IE6、IE7、IE8、Firefox、Opera》中,作者介绍了两种主要的方法来针对这些浏览器进行CSS样式区分。 方法一主要依赖于特殊的CSS选择器来区分浏览器。以下是对四种特殊符号的测试结果: 1. `&gt;`...

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...

    CSS hack 针对IE6,IE7,firefox显示不同效果

    针对IE6、IE7和Firefox显示不同效果的CSS hack是前端开发中常见的需求,特别是在使用CSS+DIV布局时。本文将详细讲解如何使用CSS hack来区分这三种浏览器,并提供一些实用的技巧和方法。 首先,我们需要了解IE6、IE7...

    CSS hack-CSS

    本教程将详细介绍如何使用CSS Hack来区分IE6、IE7和Firefox。 1. 区分IE6与Firefox: 在CSS中,可以使用星号(*)前缀作为hack,这在IE6中被识别,而Firefox则无法识别。例如: ```css background: orange; /* ...

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中,例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等,如何使网页正常显示的技术。这个技术的核心是 CSS Hack,即...

    css解决IE6,IE7,firefox兼容性问题.

    本文旨在详细介绍如何通过 CSS hack 技术以及调整 CSS 属性来解决 IE6、IE7 及 Firefox 之间的兼容性问题。 #### 二、CSS Hack 技术 CSS Hack 是一种特殊的 CSS 编写技巧,用于向特定版本的浏览器提供不同的样式...

    区分ie6 7 8 FF 的css hack 日常总结

    "区分ie6 7 8 FF 的css hack 日常总结"这个主题集中讨论了如何针对IE6、IE7、IE8以及Firefox等浏览器编写特定的CSS代码来实现跨浏览器的兼容性。 首先,让我们了解CSS Hack的基本概念。CSS Hack是指由于不同浏览器...

    css区别IE和非IE浏览器

    不同浏览器对CSS的支持程度各不相同,特别是Internet Explorer(IE)系列浏览器与其他现代浏览器(如Firefox、Chrome等)之间存在较大的差异。本文将详细介绍如何通过CSS技巧来实现对IE浏览器和其他非IE浏览器之间的...

    CSS hack技巧大全

    2. +前缀:`+`仅在IE7中起作用,用于区分IE6和IE7。 3. _下划线:`_`是IE6特有的,其他浏览器不识别。 4. \9后缀:`\9`在IE6、IE7、IE8中识别,代表CSS2.1的滤镜特性。 5. \0后缀:`\0`在IE8及更高版本、Safari 3.1+...

    区分IE6,IE7和firefox的CSS hack

    本文将详细介绍如何使用CSS Hack来区分IE6、IE7和Firefox,从而确保网页在各个浏览器中呈现一致的效果。 首先,我们来看一下几种常见的区分方法: 1. 区分IE6与Firefox: 在CSS中,我们可以利用Firefox不识别`*`...

    css样式表兼容总结,兼容火狐,ie6,ie7,FF

    标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...

    css_hack csshack技术

    ` 这样的写法可以区分IE6、IE7和其他现代浏览器。 #### 四、实例演示 假设我们需要让一个段落文本的颜色在不同的浏览器中显示不同的颜色: ```css p { color: brown; /* 所有浏览器默认颜色 */ color: red \9; ...

    CSS hack汇总

    ### CSS Hack 汇总:解决 IE6,IE7,IE8 及 Firefox 的兼容性问题 在网页设计与开发领域,确保不同浏览器间的代码兼容性是一项挑战性的任务,尤其是在处理像 Internet Explorer 6(IE6)、IE7、IE8 和 Firefox 这些...

    区别不同浏览器CSS hack

    ##### 示例2:区分IE7与标准浏览器 ```css background:green!important; background:blue; ``` 这里的目标是为IE7和标准浏览器(如FF)提供不同的背景色。IE7能够识别`!important`,所以它会将背景色设为绿色。而...

    CSS Hack 区分 IE6 / IE7 /IE8 /Firefox

    在本例中,我们讨论的是如何使用CSS Hack技术来区分IE6、IE7、IE8和Firefox浏览器,并对他们应用不同的样式。 要实现对不同浏览器的区分,CSS Hack技术主要依赖于以下几种方法: 1. IE特定的CSS属性前缀:IE浏览器...

    CSS Hack 浏览器兼容文档

    本篇文章主要探讨了针对IE6、IE7、IE8、IE9以及Firefox(FF)的CSS Hack方法。 1. **CSS Hack原理**: 不同的浏览器对某些CSS特性或者字符的识别有所不同。例如,星号(*)在IE6和IE7中被识别为一个选择器前缀,但...

    IE6、IE7、Firefox之间的兼容写法

    通过本文介绍的各种CSS Hack技巧,可以有效解决IE6、IE7以及Firefox之间的兼容性问题。然而,在实际开发中,我们还应考虑更多的现代浏览器,如Chrome、Safari等,并尽可能采用更标准、更易于维护的方式来编写CSS代码...

    CSS完美兼容IE6IE7FF的通用方法

    ### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中,浏览器兼容性一直是开发者面临的重大挑战,尤其是处理早期版本的Internet Explorer(IE6和IE7)与现代浏览器如Firefox之间的差异。本文将...

Global site tag (gtag.js) - Google Analytics