`

CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox

    博客分类:
  • CSS
阅读更多

今天被在修改CSS的时候,突然碰到要单独Hack IE8的。当然,用注释非常方便,只要添加相应的注释就可以解决。但问题是,为了一句CSS写多一个文件,或者在header上添加注释,那显然不是懒人的习惯做法。结论如下:

css hack

 

selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}
 

 

当然,注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示

演示的CSS代码如下:

p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown\9; // 所有IE浏览器
+color:red; // IE7
_color:green; // IE6
}
 

 

哈,事实就这么简单。你看到的是那一句话呢?如果你多个浏览器都测试了,就会看到,显示的文字和颜色是不同的。为什么?看看我的HTML中这个段落是这样写的:

<p class="ie">
<span style="display:block;display:none\9;">嘿嘿,小子竟然也用Firefox,蓝色文字。</span>
<!--[if IE 8]>不错不错,挺先进的嘛,使用IE8呢!文字是褐色的。<![endif]-->
<!--[if IE 7]>你,IE7,红色文字!<![endif]-->
<!--[if IE 6]>孩子,虽然显示的是绿色文字,不过,IE6可不是好东西呢!<![endif]-->
</p>
 

 

对,就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧,一看就知道那个对那个了。

源代码下载:ie-firefox-hack.zip

 

 

 

Hack 的顺序

使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他

Hack 的方法

说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.

1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.

#bgcolor {
	background:red !important; /* Firefox 等其他浏览器 */
	background:blue; /* IE6 */
}
*+html #bgcolor {
	background:green !important; /* IE7 */
}
 

IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.

上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).

 

 

 

 

 

 

 

 

 

 

 

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

时间:2010-04-22 作者:东方皓 分类:常见问题 评论:2

今日整理网站的 CSS 的时候发现我的网站在 Firefox下面出现了变形的情况,这个时候我急啊.

我就到网上找了很多资料,最后发现下面的内容比较实用:熟悉CSS的朋友一定对CSS hack十分了解了,现在IE浏览器、Firefox浏览器、Chrome浏览器、Opera浏览器、Safari浏览器百家争鸣,可苦了我们这些Web前端开发人员了。

我在这里稍微整理了一下前面了解的各浏览器的CSS hack,打包奉献一下,哈哈。

各浏览器CSS hack兼容表:

IE6 IE7 IE8 Firefox Chrome Safari
!important Y Y
_ Y
* Y Y
*+ Y
\9 Y Y Y
\0 Y
nth-of-type(1) Y Y

代码示例:


#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

//整体测试代码示例:

.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}
 

其他说明:

1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />

2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。

3、还有其他写法,比如:
*html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:

http://www.w3.org/TR/html4/loose.dtd

5、顺序:Firefox、IE8、IE7、IE6依次排列。

小知识:什么是CSS hack?

由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CSS兼容IE/Firefox要点

[日期:2007-12-09] 来源:网络  作者: [字体: ]
    首先我们说说firefox和IE对CSS的宽度显示有什么不同:
  其实CSS ’width’ 指的是标准CSS中所指的width的宽度,在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’则是指整个容器的宽度,包括内容,padding ,border。
Firefox中:容器占的宽度=内容宽度+padding宽度+border宽度
IE中:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度

  所以,如果IE中定义 width:120px;padding:5px 的话,所显示的宽度就是120px.
  即padding:5px是在width里面。
  而Firefox中,上面这个定义,显示宽度就是 130 px;
  所以,我们就必须这样定义
width:115px !important;width:120px;padding:5px;


  必须注意的是, !important; 一定要在前面。 


CSS 兼容要点:

  1. DOCTYPE 影响 CSS 处理
  2. FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
  3. FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
  4. FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
  5. FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
  6. div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
  7. cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
  8. FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参 照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空 格

XHTML+CSS兼容性解决方案小集
  使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^

  1. 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
    div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
    div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
  2. IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解 释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右 填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
    div{width:300px!important;width  /**/:340px;margin:0  10px  0  10px},关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
  3. ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
    ul{margin:0;padding:0;}就能解决大部分问题
  4. 关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
    <script  type="text/javascript">就可以了
  5. margin加倍的问题
      设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
      解决方案是在这个div里面加上display:inline;
    例如:
    <#div id="imfloat"></#div>
      相应的css为
    #IamFloat{
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/}
分享到:
评论

相关推荐

    简单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 /IE8 /Firefox

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

    CSS hack-CSS

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

    通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐

    本文将详细介绍如何通过CSS Hack来区分Firefox、IE7、IE6、IE5.5以及IE5等浏览器,并提供具体的代码示例。 #### CSS Hack简介 CSS Hack是一种技巧,它允许开发者向特定版本或特定类型的浏览器发送特殊的CSS样式...

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

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

    CSS HACK收集:关于IE6/FF/google等浏览器hack的方法详细

    本文主要聚焦于如何针对IE6、Firefox以及Google浏览器的特性进行CSS Hack,确保页面在各浏览器中的表现一致性。 1. **IE6下的a标签嵌套img标签边框问题**: 在IE6中,a标签嵌套img标签时,默认会显示边框。解决...

    css区别IE和非IE浏览器

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

    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,即...

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

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

    CSS完美兼容IE6IE7FF的通用方法

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

    CSS hack汇总

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

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

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

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

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

    兼容cssie6 7 8

    本篇文章将详细介绍如何通过CSS Hack来实现对IE6、IE7、IE8以及Firefox的兼容。 首先,我们需要理解不同浏览器之间的差异。Firefox通常对CSS标准支持较好,而IE6、IE7、IE8则存在各种解析上的问题,如盒模型、浮动...

    CSS完美兼容IE6_IE7_FF的通用方法

    这种方法主要用于区分IE7及以上版本和IE6。例如: ```css #wrapper { width: 100px !important; /* IE7+ and Firefox */ width: 80px; /* IE6 only */ } &lt;/style&gt; ``` 这里`!important`标记被用来确保规则在IE7...

    区分IE6,IE7和firefox的CSS hack

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

Global site tag (gtag.js) - Google Analytics