第16章CSS的过滤器和HACK-公开课件（精选）.pptVIP

第16章 CSS的过滤器和HACK 在本书的第一章已经提及在用户终端中流行的浏览器并完全相同。不同的浏览器对相同的CSS规则产生不同的解释。某些浏览器支持的属性，另外一个浏览器未必支持。而且某些浏览器还存在很多bug错误，令原本正确的CSS规则不能正常运行。作为页面制作人员就需要对不同的浏览器应用不同的CSS规则。CSS的过滤器和HACK技术是页面制作人员常用的应对浏览器差异的方法。本章内容包括： CSS的过滤器和HACK的概念 常用的HACK技术 修正浏览器中的BUG 16.1 CSS的过滤器和HACK概述 CSS的过滤器（filter）和第12章提及的CSS滤镜并不是同一概念。CSS的过滤器是指对某一特定的浏览器显示或者隐藏规则或声明的方法。CSS的HACK是指利用浏览器存在的问题来使用CSS规则。在实际运用中，页面制作人员一般不会严格地区分过滤器和HACK。本书中提及的关于过滤器和HACK的技术，都统称为HACK技术。 HACK技术的主要应用原理是，若某个浏览器不能解释某个选择器，那么这个选择器所包含的规则将会整个失效。同理，若浏览器不能理解某个属性或者值，也会忽略掉整个CSS规则。但要真正理解HACK技术的原理要从实例中学习。 16.2 常用的HACK技术 在本节中介绍一些现今仍需要使用的HACK技术。这些技术经过实际应用和总结得到，在许多情况下都需要应用。本章将不再介绍兼容IE5.5以及更低版本的HACK技术。 16.2.1 全局选择器html 对于全局选择器*读者应该非常熟悉，在前面的章节中常使用全局选择器将网页整体边距和补白甚至为0。使用全局选择器和html合并就是使用得最广泛的一个HACK技术。使用这个选择器修饰的CSS规则只有IE6以及更低版本的IE浏览器能够识别，其他浏览器都不能识别这个CSS规则。所以IE6所产生的bug可以使用这个HACK技术来修复。 16.2.2 !important和下划线 和*html有一样功能的还有!important和下划线，但是使用的方式不一样。 16.2.3 区分IE6、IE7和火狐的HACK技术 上述的几种HACK方法主要是区分IE6和其他浏览器的。当需要兼容IE6、IE7和火狐的时候就需要使用各自单独识别的HACK技术。*html这个HACK技术是被IE6以及其更低版本的IE浏览器所识别的，其他浏览器不能识别。而*+html的HACK技术是IE7浏览器唯一识别的。示例16-2中，同一段文字在不同浏览器中有不同的文字大小。 16.3 修复浏览器中常见的bug 在浏览器中存在许多已被发现和未被发现的bug。作为页面制作人员需要使用各种方法修复这些影响布局和样式表现的bug。所谓修复浏览器中的bug并不是要更该浏览器的编译程序，而是要运用HACK方法或者其他方法来消除bug。本节中介绍了多个在实际情况中常常遇到的bug以及修复这些bug的方法。 16.3.1 修正浮动元素的双倍边距bug 浮动元素的双倍边距bug是IE6中最常见的bug。当一个块级元素既应用了浮动又具有水平边距就会在IE6浏览器中产生双倍边距的错误显示。【示例16.4】本例子中命名为left的div容器应用了浮动。并且设置其四边边距为10像素，这时该容器在IE6中产生双倍边距的bug。 16.3.2 修正IE6的消隐bug 在IE6中存在一个难以发现的bug，但经常会出现。经验较浅的页面制作人员常不知道为何会出现这样的bug。这个bug成为消隐bug，也有一种称呼为“躲躲猫”bug。之所以叫做消隐bug，是因为页面中某些文本忽然消失，然后刷新页面时又出现。开始时很多人都认为是网络延迟的原因，后来才发现是IE6的bug。完全符合以下所列的情况就会产生这个消隐bug。 当一个浮动元素和一些非浮动元素以及一个清理元素同时被一个父元素包含 父元素有背景图或者背景颜色 16.3.3 修正IE6的重复字符bug 在IE6中有某些文本的末尾会出现重复的字符。这是在某个特定的情况下，由注释引起的。通常在XHTML文档中的任何位置插入注释!-- 注释 --都不会引起错误。但是当浮动元素之间出现注释时就会在IE6浏览器中引起重复字符的bug。 16.3.4 让火狐自动计算容器高度 在一个没有设定高度值的父容器中若使用浮动元素，那么在火狐浏览器中，该父容器不能自动计算高度。而在IE浏览器中，父容器能自动计算高度，自动被撑开。【示例16.10】本例子中的父元素中有两个浮动元素，父元素没有设置高度。 16.3.5 实现容器的最小高度 在实际运用中，常常需要设置一个在页面占据固定位置的容器。这个容器的内容是不固定的，当容器的内容总体高度少于容器设置的高度，容器就保持原来的高度。当容器的内容总体高度大于容器设置的