CSS IE7 IE6 Firefox多浏览器兼容

在理想的环境中，编写正确的CSS会在支持CSS的每个浏览器中正常工作。不幸的是，我们并不是生活在理想的世界中，浏览器有不少的Bug和不一致的地方。为了创建能够在各种浏览器上显示相同样式的页面，CSS开发人员需要发挥创造性。通过利用 Bug(hack)和未实现的CSS，开发人员能够选择性地对不同浏览器应用不同地规则。“招数Hack”和“过滤器”是CSS开发人员地强大工具。但是，正因为功能强大，使用时应该谨慎。了解各种常用招数Hack以及他们地工作原理确实很重要。但是，了解在什么时候应用他们以及什么时候不应该使用也同样重要。

在后面讲陆续讲这样的一些东西。

1. 招数和过滤器之间的差异。
2. 好的过滤器和差的过滤器以及如何复责任地使用他们。
3. IE地有条件注释。
4. 星号Html过滤器和星号、加号Html过滤器。
5. 注释反斜线过滤器和Holly招数。
6. 反斜线过滤器和修改后地简化框模型招数(MSBMH)。
7. !important 和下划线过滤器。
8. 子过滤器和属性过滤器

多浏览器兼容是一件苦力活，其实没有什么难度，针对不同地浏览器利用上面讲地方法，适当地写上不同浏览器支持地样式，这样多浏览器在一块就和谐了。甚至在不同的操作系统也可以和谐共处。比如MAC和PC。要相信自己能够战胜这样的困难，多浏览器兼容需要不停的调试，需要耐心，我以前曾写过一个没有利用任何Bug(Hack、!important)的CSS，也可以完美支持所有的浏览器，虽然一个页面的CSS需要几天来调试，但是这件苦力活并不是不可能完成的。其实还是一句老话，世上无难事，只怕有心人。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Hack和过滤器其实是一种迫不得已的办法，不要稍微掌握了几招然后就开始炫耀，到处乱写，虽然能够达到你的最初目的。不要到了完工的时候看一看你的CSS文件似乎到处是Hack，到处都是补丁，似乎已经为每个浏览器都量身定做了一遍CSS。在使用hack和过滤器的时候其实更应该多理解CSS的标准规范，实际上要用到hack的情况是很少的。Hack本身一词也是不包含正面意义的，而是讲这是一种迫不得已的行为，是利用了不正确的浏览器行为。

作为一般规则，使用以来与不支持的CSS的过滤器，而不是依赖于某种浏览器bug的过滤器，这可能比较安全。

对比相对高级的浏览器应用规则和生命，同时可以确定老式的浏览器会平稳的退化。当浏览器新版本发布时候，如果它现在支持你作为过滤器使用的CSS，那么它应该会如预期那样工作。因为浏览器会越来越符合标准，如果使用比较高级的CSS克服老式浏览器中的问题，这个问题很有希望在新的版本中得到解决。因此，使用不支持的CSS作为过滤机制是一种相对安全的方法。之所以说“相对”是因为浏览器有可能支持新的CSS，但是仍然表现出你试图修复的Bug。

因为使用依赖于解析bug的过滤器是一种有点冒险的方法。这是因为依赖于bug而不是特性。与前面的方法相似，如果解析bug被修复了，而你试图修复的bug还没有得到解决，那么可能会遇到问题。但是，更严重的是，解析bug在浏览器的新版本中可能有新的表现形式。例如，假设Firefox的一个新版本有某个解析bug。如果使用这个bug作为过滤器向IE提供不同的宽度值，从而解决专用框模型的问题，那么Firefox有可能突然继承这个宽度，这可能会破坏许多站点的设计。

在CSS中，有许多方法可以实现同样的效果，所以如果某些东西造成了问题，那么可以尝试另一种方法。许多CSS错误是由过分复杂的代码和标记造成的。如果使代码保持简单了，那么可以避免使用大多数招数Hack。

那么应该使用怎样的策略保证一个网站的CSS简单明了，而且又能适应众多浏览器呢？如果经过充分的思考，认识到只能应用某种Hack或过滤器，那么需要以明智且受控制的方式应用它。如果CSS短小而且简单，并且只需要应用很少几个Hack，那么将这些Hack放在主CSS文件中可能是安全的。但是，Hack往往相当复杂，使代码更加难懂。如果CSS文件很长，或者需要使用的招数比较多，那么最好将它们放在它们自己的样式表中。这不但使代码容易阅读，而且如果Hack在新的浏览器中造成了什么问题，那么可以准确的知道它的位置。与此相似，如果决定取消对某种浏览器的支持，那么只需要删除适当的CSS文件，就可以删除相关联的Hack。或者用程序判断浏览器信息，然后链接相应的CSS文件。或者可以用条件注释(见下一篇)。

为了帮助你正确的选择过滤器或者Hack，推荐这个站点（http://centricle.com/ref/css/filters/）。这个站点提供了表格来描述那些过滤器在那些浏览器中是有效的，非常详尽。

常用Hack浏览器匹配图:

--------------------------------------------------------------------------------------------------------------------------------------------------------------

条件注释:

有条件注释是一种专门的（因为是非标准的）、对常规(X)Html注释的Microsoft扩展。顾名思义，有条件注释使你能够根据条件（比如浏览器版本）显示代码块。因为使非标准的，但是有条件注释对于其他所有浏览器作为常规注释出现，因此本质上是无害的。有条件注释在Windows 上的IE5中首次出现，并且得到了Windows浏览器的所有后续版本的支持。

要想将一个特定的样式表交给IE5、IE6、IE7或更高的版本，那么可以在(X)Html文档的开头放置一下代码:

<!--[if IE]
<style type="text/css">
@import ("ie.css");
</style>
-->

Windows上的IE5和更高版本会接收样式表ie.css，而其他所有浏览器只会看到一些被注释掉的文本。可以使用有条件注释指定一种特定的浏览器，比如IE6.0

<!-- [if IE 6]
<style type="text/css">
@import ("ie60.css");
</style>
-->

还可以指定一组浏览器，比如IE5.5和更高的版本:

<!-- [if gte IE 5.5000]
<style type="text/css">
@import ("ie55up.css");
</style>
-->

或者IE7

<!-- [if It IE 7]
<style type="text/css">
@import ("ie70.css");
</style>
-->

这种办法极其有效，而且非常容易记住。主要的确定是这些注释需要放在HTML中，而不是放在CSS中。如果某一阶段你希望停止支持某种浏览器，就需要从每个页面中删除注释，当然这只是针对静态页面的站点了，如果你是动态网站的话，把CSS作为可动态调用的一部分，这样修改起来也很方便的。如果你觉得还不好，那我们下一篇再看另外一个过滤器Tantek Celik。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Tantek Celik的带通过滤器:

Tantek Celik 基于浏览器解析错误创建了一系列过滤器(http://tantek.com/css/examples/)，允许使用@import规则将样式表提供给选择的浏览器。因为他们是CSS规则，所有这些过滤器可以放在一个CSS文件中，这样就可以再一个地方集中的控制过滤的文件。将招数Hack隔离到浏览器特定的CSS文件中，可以大大简化对招数Hack的管理。如果决定停止对某一浏览器（比如IE 5.0）的支持，那么只需要删除相关的样式表，而不需要再大量页面代码中进行搜索和修改。

注意: /**/ 是CSS中的注释格式。其实下面所说的所有过滤方法都是 /**/注释 和 \ 转义的混合效果。

要想将CSS文件传递给 Windows 上的IE5.5 和IE5，可以使用 Tantek 的中统过滤器:

@media tty {
 i{content:”\”;/*” “*/}} @import ‘ie5x.css’; /*”;}
}

这个过滤器看起来像一堆无意义的规则，而且对于许多浏览器确实如此。只能理解CSS 1的浏览器不认识@media 规则，因此完全忽略它。能力更强的浏览器会看到@media 规则中的一个声明，其目标是寻找<i>元素。由于第二个引号前面有一个转义字符，Content 属性的值被认为是一个无意义的字符串。基本上，现代浏览器会看到下面这样的规则：

@media tty {
  i { content:”Blah, blah blah”;}
}

转义字符是一个保留字符(通常是反斜线)，它使解析器忽略后面的保留字符。所以所以，如果希望使用 CSS content 属性自动生成一个引号，那么必须对它进行转义，否则它就会结束前引号：
blockquote:before {content: “\”"}

tty 媒体类型指的终端和电传打印机。新运的使，当前没有设备支持这种媒体类型，所以符合标准的浏览器实际上会忽略整个规则。

但是，IE5.x/Windows 不理解转移字符的，所以会提前结束内容声明。后面的字符会结束<i> 和@media规则，这导致应用@import 规则。所有多于的字符都被注释掉，因此再 IE 5.x/Win 看来整个规则像下面这样:

@media tty {
  i { content:”blah” ;
       /* blah */
     }
}
@import ‘ie5x.css’
/* blah */

这非常复杂，但是幸运的是，你不需要知道这些过滤器是则怎么工作的，只需要知道怎么使用他们就可以了。

为了向IE 5.x/Win 的特定版本提供CSS文件，创建了中通过滤器的两个变体，他们利用了这些特定浏览器中各种Bug。这些过滤器称为IE 5/Windows 带通过滤器：

@media tty {
  i {content:”\”;/*” “*/}}; @import ‘ie50win.css’; {;}/*”;}
}/* */

和IE 5.5/Windows 带通过滤器}

@media tty{
  i {content:”\”;/*” */}}@m; @import ‘ie55win.css’; /*;}
}

另一种可能希望明确指定的浏览器是Mac 上的IE 5.2。为此，可以使用Tantek的IE5/Mac带通过滤器，它利用了另一个转义Bug，这一次是在注释中：

/*\*//*/
@import “ie5mac.css”;
/**/

IE 5/Mac 错误地对第二个星号进行转义，导致应用@import 规则。因此, IE5/mac 会看到下面这样的规则：
/* blah   */
@import “ie5mac.css”;
/**/

而其他所有浏览器都会正确的忽略转义的元素，因为它放在一个注释中，@import 规则被注释掉了。其他所有浏览器都会看到下面这样的规则（实际上就是没有规则）

/* blah *//*
  blah
*/

与其他带通过滤器一样，不需要理解这个过滤器的工作原理，直接使用即可。这些过滤器的出色之处在于，他们巧妙的利用了老式浏览器中的Bug。因此，应该可以放心的使用他们，他们应该不会在新式的浏览器中造成问题。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

子选择器招数(Hack)和属性选择器:

子选择器招数(Hack) 

最安全的过滤器依赖于未实现的CSS，而不是浏览器Bug。因为这些过滤器使用有效的CSS选择器来应用有效的声明，所以严格地说，他们根本不是过滤器。他们仅仅是某些浏览器所不能理解的有效CSS规则。这些过滤器中的第一个称为子选择器招数。Windows上的IE6和更低版本的IE不支持子选择器，所以可以使用它对这些浏览器隐藏规则。为了让这种过滤器起到作用，必须确保在子选择器前后没有空格。

在这个示例中，使用子选择器招数（Hack）对IE 5-6/Win 隐藏透明的北京PNG图象。

html>body {
   background-image:(bg.png)
}

IE7 预期会支持子选择器，还会支持PNG透明度。通过以这种方式使用子选择器，就允许IE的新版本看到透明背景，而不需要修改代码，因而提供了向前兼容性。等于ie5，i56视而不见，而IE7可以用得恰当好处，这里并不是多浏览器兼容，而是向前兼容。

属性选择器招数(Hack)

另一种过滤器规则的有趣方法是使用属性选择器。许多当前的浏览器（比如 Safari–Mac苹果上的  和Firefox IE7）支持使用属性选择器，但是IE6并不支持它。因此，可以使用属性选择器在比较高级的浏览器中对类和ID应用样式。在这个示例中，使用属性选择器在符合标准的浏览器中将背景PNG应用于内容div:

div[id="content"] {
     background=url(bg.png);
}

你可以用这些让不同浏览器显示出不同的效果，当然也可以使用它在多浏览器里显示同样的效果。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

著名的星号* Html Hack(招数):

对于CSS当中让IE7、IE6、Firefox兼容最著名且最有用的CSS过滤器之一是星号 * Html HACK。这个过滤器非常容易记住，它可以制定IE6和更低版本。正如你知道的，Html 元素被认为是网页上的第一个元素，即根元素。但是，IE 的所有当前版本有一个匿名的根元素，它包围着Html 元素。那么这个匿名的元素或者说隐藏的元素到底是什么元素呢？其实它就是鼎鼎大名的* 号，所以我们可以用星号来指定的规则应用于那些被星号包围的 HTML。

IE6以及更老的IE5.5

* html {
  font-size:small;
}

在任何非ie的浏览器因为没有这个规则（Html元素被*号包围），所以其他的浏览器就会当作看不见，所以当你指定这个规则的时候，你可以放心的应用在IE6以及前一版本的IE5.5要展示效果中。IE 7 并没有完全去掉这个 Hack。而是用这样的办法来让过滤，那就是用 *+

IE7

*+html {
  font-size:small
}

这样的表达，就是说除了IE7能认识这个font-size:small以外，其他的浏览器都不会看到这一条的，可以说这是IE7的专属Hack。

这样的方式可以写在同一个CSS文件，并且同时都会针对不同的浏览器产生独特的效果。所以在设计页面或者样式的时候，你不妨用FireFox 来做第一浏览器，对照Firefox样式写好后，再把页面放到IE7下看看，进行适当的调整，再放到IE6下面看看，进行适当的调整。基本上按照<div><ul><li></li></ul></ul>的顺序嵌套的话，IE6根IE7的规则是差不多的。调好了IE6的样式就等于调好了IE7的样式，反之亦然。再者，用Firefox来写样式还是更符合W3C一些，因为IE6和IE7要考虑到以前的兼容性，不得不在规范上做些让步，达到兼容的目的。虽然大家都很憎恶为什么多一个Firefox，但是这是没办法的:(。你要掌控它而不是被它掌控了^_^。

基本上用星号搭配搞定IE6，IE7，Firefox以后，像Opera之类的浏览器也会正常显示的。就不用单独考虑他们的兼容问题了。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

兼容总结:

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.多耐心的调试，肯定让你学到不少好东西。

一、CSS HACK
以下两种方法几乎能解决现今所有HACK.

1, !important (不是很推荐，用下面的一种感觉最安全)

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

代码:

<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

代码:

<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

代码:

<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧(相当有用)

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码:

兼容代码:hack最推荐的模式。

/* FF */
.submitbutton {
 float:left;
 width: 40px;
 height: 57px;
 margin-top: 24px;
 margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
 margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
 margin-top: 21px;
}