CSS Design之Hack攻略

大家在使用CSS开发网页时都难免碰到各浏览器之间的兼容问题，因为每种浏览器对CSS解释都有自己的一套说法，在此之下给使用CSS的开发人员带来了不同的烦恼，例如在FF下浏览正常，在IE浏览就出问题了呢？为了对付类似问题大家需要发挥创造性，通过利用Hack和Filter的强大工具来Fix Bug。正因为其功能强大，使用时也须谨慎。为了大家能更好的使用，我在此搜集各种相关资料来解释一下其四者之间的关系，并列举一些常碰到的Bug和其Fix攻略。

现在我们先来讲一下这个Bug 、Hack、Filter、Fix的含义：

Bug：由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。我们把对CSS 的解析认识不一样的问题称作Bug，可能这个解释不太理想，大家可以理解为浏览器解析不同生成的浏览效果问题。

Fix ：解决Bug的方法我们称作Fix;

Hack:针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

Filter：是一种特定的浏览器或浏览器组显示或隐藏规则或声明的方法

值得注意的是某些招数（Hack）和滤镜（Filter）会使用你的CSS代码失效，

一、过滤单独的样式表：

将Hack放在浏览器特定的CSS文件中，然后使用过滤器将它们发送给对应的浏览器，这会大大简化Hack的管理，当前主要有两种主要的实现方法：一种是使用解析Bug利用@import规则将特定的Css文件发送到适当的浏览器，另外一种是针对IE系列浏览器，使用IE的条件注释。

l带通过滤器（Tantek Celik）:

Tantek Celik 是基于浏览器解析错误创建的一系列过滤器，充许使用@import规则将样式提供给不同的浏览器，将这些招数放置在一个CSS文件中，集中地控制过滤文件，大大简化了其Hack的管理

这里列出IE5.x/Win和IE5.x/Mac的带通过滤器：

另外一种是在Mac机上的IE5.2带通过滤器：

具体这些过滤器是什么工作原理，我也没弄懂，只需要知道如何用就行了，加上IE5系列接近淘汰，大家可以会用得比较少。在此也不在多花时间陈述这些看不懂的代码。

l子选择器Hack：

最安全的过滤器依赖于未实现的CSS，而不是浏览器的Bug，因此它们是某些浏览所不能理解的有效的CSS样式规则。其中就有一个子选择器Hack，Win的IE6以及IE6以下系列不支持子选择器，所以使用它对IE6以下版本（含IE6版本）的浏览器，此样式无效果显示。为了使子选择器起作用，必须确保在子选择器前后没有空格。

例如：

先看FF和IE6/Win以上系列浏览器的效果：

IE6效果：

因为IE6以下不支持子选择器功能，所以他保持前面P标签样式效果，IE7和FF支持子选择器，其在浏览器中看到的效果就如前图所示。

l属性选择器Hack

属性选择器，诜我现代浏览器（Safari和FF）支持，但IE6及其更低版本不支持。

例如：

HTML：

CSS样式：

FF和IE7、IE8效果图：

IE6效果图：

最有用的CSS Hack过滤器之一是*html Hack，这个过滤器可以指定IE6和更低版本。但现代浏览器隐藏此属性。但是IE6下面根目录下的元素都使用相同的CSS规则，如：

FF和IE7、IE8效果：

IE6效果图：

l/Mac注释反斜线Hack

Mac上的IE5.x/Win错误地充许在注释内部进行转义，这个过滤器的工作方法是在结束注释字符串前面加上一个反斜线（\）。其它所有浏览器都会隐藏这个转义，并且应用后面的规则。但IE5/Mac 会认为注释仍然没有结束，会把下一个结束注释字符串前面的所有字符忽略。如：

如果结合*html Hack就变成了Holly Hack，通过这两个规则，就可以对WIN上的IE6和其以下版

l转义属性Hack

Win上的IE5.x不忽略转义符号，所有现代浏览器不会忽略这个转义字符，但是IE5.x/Win会认为这个转义符号是属性名的一部分，并且不认识这个属性，所以忽略这个样式声明：

在现代浏览器效果：

IE5.x/Win效果：

从效果图中可以看出，现代浏览解释P标签的宽度是300px而在IE5.x/Win是200px;

l Tantek的框模型Hack

其主要是解决IE的专有框模型问题，这个过滤器将一个宽度传递给Win上的IE5，将另一个宽度传给其它浏览器，它也是使用转义符。如：

在现代浏览中的效果图：

IE5.x/Win中的效果：

另外在Opera5也有与IE5.x/Win一样的解析Bug，因此在后面还要给Opera5提供一个正确宽度，来保证其正常显示效果：

l修改后的简化框模型Hack：

转义属性和*html Hack相结合，形成修改后的简化框模型Hack，我们把他称作：MSBMH Hack，这个Hack用来解决IE的专有框模型问题，它向IE5.x/Win提供一个长度值，然后向IE6/Win和所有现代浏览器提供一个正确宽度值，如：

现在先看看还没有使用Hack下浏览器下的正常宽度：

IE6及以上版本：

IE5.x/Win:

标准情况下，这个盒的宽度应该是：5+5+30+30+200=270px。但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它会认为200px是整个盒的总宽度，那么如果这样解释的话，内容的宽度变成：200-5-5-30-30=130px。这样就造成了上面两种浏览效果，现在我们来改变一下：

所有浏览器的P宽度都一样了：

注：这个过滤器并非只能用在Box模型中，也能用到别的样式中。

l!important 和”_” Hack

!important这个属性其实也是css规范中的，结果IE6并不支持，也正因为它不支持，才让很多的CSSer们找到了问题解决的方法。一般来讲，在css中，如果在同一个css块中写下两个同样的属性，那么其实是按照最下面的来执行的，比如说：

结果是IE6及以下版本不支技!important样式规则，而选用了下面的规则，但是现代浏览器却

对!important 具有优先权，如图所示：

IE6 及其以下版本：

现代浏览器：

下划线（_）和!important是同类性质，只是它只有IE6及以下版本支持，现代浏览器都无法识别，因此我们结合!important可以直接对所有浏览器设置其自已需要的样式，只不要注意一个先后顺序问题，!important要放在下划线（_）的前面。

这里提供一张https://www.wendangku.net/doc/a218980419.html,上的过滤器支持表供大家先参考一下：

二、IE的有条件注释

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

只有IE才能识别

因为只有IE5以上的版本才开始支持IE条件注释，所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。

或：

只有特定版本才能识别

例如，只有IE5才能识别，只有IE6才能识别，只有IE7或者IE8才能识别。识别的条件是特定的版本，高了或者低了都不可以。例如下面的代码块，将只会在IE8中有效：

只有不特定版本才能识别

例如下面的例子中，特定了IE7版本不能识别。

只有高于特定版本才能识别

例如下面的代码只有高于IE7版本才能有效果：

只有等于或者高于特定版本才能识别

如下代码所示：

如：

只有低于或等于特定版本才能识别如：

条件注释属性含义

gt : greater than，选择条件版本以上版本，不包含条件版本

lt : less than，选择条件版本以下版本，不包含条件版本

gte : greater than or equal，选择条件版本以上版本，包含条件版本

lte : less than or equal，选择条件版本以下版本，包含条件版本

! : 选择条件版本以外所有版本，无论高低

三、Bug和Fix

前面我们主要讲了Filter 和Hack，现在我主要针对浏览器出的Bug以及其Fix方法，首来看看Bug：Bug捕捉：

大家都知道每CSS编写的Web在各浏览器都会存在一定的Bug，特别是在IE系列浏览器，，当大家编写的代码中遇到问题首先想到的是浏览器的Bug，然后就求助于某个Hack。为了避免这些问题，在处理CSS Bug这前最好假设性说自己做错了什么，只有在确定自己没有做错什么时候，才应该去考虑是不是浏览器带来的Bug。因为有许多Bug是自己在编写CSS代码时我书定错误造成的，比如说，代码打错字母，和语法拼错等造成的，了为防止这种Bug给大家带来不必要的麻烦，最好是先通过Html和CSS检验器运行自己的代码，这应该会发现编写Html和CSS代码时造成的输入错误，并向你显示错误的所在行和每个错误的简短描述：

本机的Html验证：https://www.wendangku.net/doc/a218980419.html,/check

本机的CSS验证：https://www.wendangku.net/doc/a218980419.html,/css-validator/validator

我工作的运行环境是在FF下，并安装了相关插件，如果你没有，可以在网上下载相关插件。有时你验证代码时，检验器会显示一大堆的问题，你千成别慌，你只要先进行修复，然后在刷新重新验证，重复几次这样的操作，问题就全部解决了。另外，你认为的某些CSS样式规则是正确的，但检验器报告出是错误的，那么你一定要检查最新的CSS规范，CSS检验器对Hack的语法是认为为不规范书定语法，因此你处理完Bug再次进行CSS校验时，记得把CSS Hack书写到一个专门的CSS文件中，这样有利于CSS样式的校验。

捕捉Bug的基本知识：

?先检查你的网页是否正确使用适合自己的标记语言：DOCTYPE，从而让页按照你要求的声明

标准的浏览器如FF或Safari作为自己开发浏览器，然后在去较差的浏览器中测试你的页面，并为发现的问题去寻找解决方案。

?通过本地或网上代码校验器验证自己的代码，最好是写完了Html标记后就先校验其语法，然后进行CSS代码的编写，把编写完的CSS代码校验完后进行页面在别的浏览器的测试，找到显示出问题的地方，寻找相应的方案解决问题，我个人喜欢边写CSS代码边不间断进行在IE各系列版本浏览器下测试。

?接下来隔离问题，通过隔离问题和识别症状，有可能找到是什么原因造成问题的出现，并且进行相应的修复。隔离问题最好的一种方法就是给其加上Box Border或是给其应用Background-color 看看它们有什么样的效果变化，我经常在编写代码时给其加上一个背景色或是应用不同样式的边框来区分各元素，然后给其修改几个属性，看看Bug有没有被Fix，如果有说明问题就存在此处，这样你就能找出解决它的Hack了。

?你也可以通过创建测试案来解决Bug，首先应该复制出问题的文件，删除其它的Html代码，直到只剩下最基本的内容，然后进行CSS样式规则注释，从而找到哪些样式规则导致这个Bug的出现，进行修复。

?修复问题，找到产生Bug的问题所在，你可能通过改变应用别的样式来实现此效果，如果实在无法回避免此Bug，那么就尝试使用Hack和Filter来Fix它，当然大家也可能在搜索引擎中搜寻类似Bug的解决方案。

常见的Bug和其Fix修复方法：

在这里罗列一些自己碰到的一些Bug和Fix修复方法，以及规纳了一些前辈的经验，在讲Bug 和Fix之前我先列一下各种版本浏览器的选择器的区分与识别，这个对后面帮助Fix Bug有一定的帮助。

选择器的识别：

1)正常的CSS选择器：

Selector { property1: value1;property2:value2;…propertyN:valueN;}，其中selector是Css选择器，Property是其属性名称，Value是其属性值。

2)selector {+property: value;}在属性名称前加上一个加号“+”，只有IE7以及其以下版本识别，FF和IE8不识别此属性，如：

FF和IE8的效果：

IE7以及其以下版本：

3)selector {*property:value;},在属性名前加上一个星号“*”，只有IE7以及其以下版本识别，如：

FF和IE8效果：

IE7以及其以下版本效果：

4)selector { _property: value;},在属性名前加上一个下划线“_“，只有IE6及其以下版本识别，如：

FF和IE7-IE8效果：

5)*html selector {property: value;} 在选择器上运用继承法，只有IE6版本及其以下版本识别：

FF和IE7 IE8效果：

IE6以及其以下版本效果：

6)html/**/>body selector {property:value;},只有IE6版本以及其以下版本不识别：

FF和IE7、IE8效果图：

IE6版本以及其以下版本效果图：

7)*+html selector {property:value;}，只有IE7版本识别：

IE7版本效果：

其它版本效果图：

8)selector{property：value\9;} ,这个Hack IE6版本及以上版本都识别，在FF下不能识别：

IE6版本及其以上版下效果：

FF效果：

但在IE5.5产生的效果图让人无法理解：

我们把最后一个属性提出来单独放置，就能回复其IE5.5下的效果：

9)selector {property:value\0;},只有IE8版本才能识别，如上例一样，放置在一起能给其IE7以及其以下版产生无法理解的规则，因此我们把其提出另外放置：

IE8版本效果：

FF和IE7以及其以下版本效果：

选择器的区分

(一)FF与IE6的区别：selector {property: value; *property:value;}如：

IE6效果：

其实不单在IE6下这显示兰色背景，在IE7以下的版本都显示的兰色背景

(二)FF与IE7的区别与FF同IE6的区别相同样；

(三)FF与IE8的区别：selector {property: value; property:value\0;} 如：

FF下效果：

IE8下效果：

(四)IE8与IE7区分：selector{property:value \0; } selector{property:value} 如：

IE7下效果：

(五)IE7与IE6区分：selector{property:value !important; property: value;} 如：

IE7下效果：

IE6下效果：

(六)各浏览器区分：

Selector{ property:value;}支持所有浏览器；

Selector{property:value\9;}支持所有IE系列浏览器除IE5.x之外；

Selector{*porperty: value;}支持IE7以及其以下版本浏览器；

Selector{_porperty:value;}支持IE6以及其以下版本浏览器；

如：