html5兼容性问题….docVIP

网页设计html+css兼容性问题处理办法汇总 ? 标准网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE 7、IE 6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。 IE浏览器对于标准技术的支持是很不完善的，这些问题可以分为两种：一种是IE支持某种技术或功能，但是实现该功能的方法和途径与标准技术不同；另一种是IE浏览器自身的解析机制存在很多Bug，导致页面解析效果与标准不同。 本章将兼顾IE 6、IE 7和FF三种主流版本或类型浏览器进行讲解，其中IE 6浏览器用户数最多，IE 7的用户将逐步超越和代替IE 6，而FF浏览器代表了标准浏览器的主流。 1? 兼容不同类型浏览器的基本方法 不同类型浏览器对于CSS技术的支持是不完全统一的，如果再加上浏览器对于CSS解析时存在各种Bug，CSS兼容性处理就变得异常复杂。 解决浏览器兼容问题的方法，这些方法被称之为Hack（即补丁的意思）。所谓Hack，就是利用各种过滤方法专门为特定类型浏览器定义样式，即称之为过滤器（Filter），从而实现在不同类型浏览器中呈现相同的渲染效果。 过滤器是一种形象的称呼，实际上它就是各种浏览器支持或不支持某种声明或样式的特殊用法。例如，IE 6以下版本浏览器不支持!important关键字，我们就可以利用这个关键字专门为IE 6及其以上版本浏览器或者非IE浏览器定义样式，从而过滤掉IE 6以下版本浏览器在解析时存在的问题。 2 1? 标准网页布局的兼容性处理 1.1? 常用过滤器 目前全球设计师发现并总结出来的过滤器非常多，要记住这些过滤器是很繁琐的，读者可以参阅/ref/css/filters/ 3 1? 标准网页布局的兼容性处理 1.1? 常用过滤器 munis.co.uk/dithered/css_filters/css_only/index.html 4 1? 标准网页布局的兼容性处理 1.1? 常用过滤器 IE 7版本浏览器专用过滤器 如果专门为IE 7版本浏览器定义样式，则可以使用如下过滤器。该过滤器还可以兼容即将上市的IE 8版本浏览器。 style type=text/css *+html body { background:blue; } /style ? 兼容原理： “*”符号在IE浏览器中被认为是根节点，所以它可以包含html元素，而对于非IE浏览器来说，文档根节点应该是html，而不是“*”，所以当使用“*”通用符号包含html元素时，非IE浏览器会认为它是非法的，从而忽略这个选择器所定义的样式。同时IE 6及其以下版本浏览器不支持相邻选择器（+），所以也会忽略该选择器定义的样式。 5 1? 标准网页布局的兼容性处理 1.1? 常用过滤器 IE 6及其以下版本浏览器专用 ? style type=text/css * html body { background:red; } /style ? 不过从语法角度分析，IE 7应该支持*通用符号包含html元素，但事实上并不支持，所以这也是一个很有趣的过滤器。 6 1? 标准网页布局的兼容性处理 1.1? 常用过滤器 IE 7和非IE浏览器专用 style type=text/css htmlbody { background:green; } /style ? 兼容原理： 因为IE 6及其以下版本浏览器不支持子选择器，所以会忽略该过滤器定义的样式。 7 1? 标准网页布局的兼容性处理 1.1? 常用过滤器 非IE浏览器专用 style type=text/css html/**/body { background:yellow; } /style ? 在IE 8中存在问题，需要使用其他方法。 ? ? 8 1? 标准网页布局的兼容性处理 1.2? 使用IE条件语句过滤 IE条件语句是IE浏览器自定义的一套逻辑语句，利用这些语句可以更加有效的为IE系列版本浏览器定义样式。 IE条件语句实际上就是HTML注释语句，只不过在注释标识符中增加了一组关键字，这一组关键字对于IE浏览器来说是有效的，但是对于其他浏览器来说，则被视为注释信息完全忽略。由于IE浏览器能够根据条件语句中设置的条件决定解析的版本，从而实现利用条件为不同IE版本浏览器定义样式的目的。 !--[if IE] h1所有IE版本浏览器可识别/h1 ![endif]-- ? 9 1? 标准网页布局的兼容性处理 1.2? 使用IE条件语句过滤 IE条件语句以中括号（[]）为起止标识符，其中包含一个条件语句。条件语句放在注释标识符内，且与注释标识符内部相