css design之hack攻略

《css design之hack攻略》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、ternetExplorer6,InternetExplorer7,MozillaFirefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。我们把对CSS的解析认识不一样的问题称作Bug，可能这个解释不太理想，大家可以理解为浏览器解析不同生成的浏览效果问题。Fix：解决Bug的方法我们称作Fix;Hack:针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。针对不同的浏览器写不同的CSScode的过程，就叫CSShack,也叫写CSShack。Filter：是一种特定的浏览器或浏览器组显

3、示或隐藏规则或声明的方法值得注意的是某些招数（Hack）和滤镜（Filter）会使用你的CSS代码失效，一、过滤单独的样式表：将Hack放在浏览器特定的CSS文件中，然后使用过滤器将它们发送给对应的浏览器，这会大大简化Hack的管理，当前主要有两种主要的实现方法：一种是使用解析Bug利用@import规则将特定的Css文件发送到适当的浏览器，另外一种是针对IE系列浏览器，使用IE的条件注释。l带通过滤器（TantekCelik）:TantekCelik是基于浏览器解析错误创建的一系列过滤器，充许使用@import规则将样式提供给不同的浏览器，将这些招数放置在一个CSS文件中，集中地控制过滤

4、文件，大大简化了其Hack的管理这里列出IE5.x/Win和IE5.x/Mac的带通过滤器：PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cnCSSDesign—BugHackFilterFix攻略另外一种是在Mac机上的IE5.2带通过滤器：具体这些过滤器是什么工作原理，我也没弄懂，只需要知道如何用就行了，加上IE5系列接近淘汰，大家可以会用得比较少。在此也不在多花时间陈述这些看不懂的代码。l子选择器Hack：最安全的过滤器依赖于未实现的CSS，而不是浏览器的Bug，因此它们是某些浏览所不能理解的有效的CSS样式规则。其中就有一个子选择器Hack，W

5、in的IE6以及IE6以下系列不支持子选择器，所以使用它对IE6以下版本（含IE6版本）的浏览器，此样式无效果显示。为了使子选择器起作用，必须确保在子选择器前后没有空格。例如：先看FF和IE6/Win以上系列浏览器的效果：PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cnCSSDesign—BugHackFilterFix攻略IE6效果：因为IE6以下不支持子选择器功能，所以他保持前面P标签样式效果，IE7和FF支持子选择器，其在浏览器中看到的效果就如前图所示。l属性选择器Hack属性选择器，诜我现代浏览器（Safari和FF）支持，但IE6及其更低版

6、本不支持。例如：HTML：CSS样式：FF和IE7、IE8效果图：IE6效果图：l4、*htmlHack：PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cnCSSDesign—BugHackFilterFix攻略最有用的CSSHack过滤器之一是*htmlHack，这个过滤器可以指定IE6和更低版本。但现代浏览器隐藏此属性。但是IE6下面根目录下的元素都使用相同的CSS规则，如：FF和IE7、IE8效果：IE6效果图：l/Mac注释反斜线HackMac上的IE5.x/Win错误地充许在注释内部进行转义，这个过滤器的工作方法是在结束注释字符串前面加上一个

7、反斜线（）。其它所有浏览器都会隐藏这个转义，并且应用后面的规则。但IE5/Mac会认为注释仍然没有结束，会把下一个结束注释字符串前面的所有字符忽略。如：如果结合*htmlHack就变成了HollyHack，通过这两个规则，就可以对WIN上的IE6和其以下版本应用规则：PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cnCSSDesign—BugHackFilterFix攻略l转义属性