网页兼容处理.pptVIP

* 网页布局的兼容性处理 标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。 就是当我们使用不同的浏览器(如IE7、IE6、Firefox等)访问同一页面时，可能会出现不一致的情况，原因是浏览器对于技术支持的标准不同造成的。我们对IE7、IE6、FF（Firefox）三种主流版本浏览器进行讲解。 1、兼容不同浏览器的基本方法-CSS Hack CSS Hack: 各种浏览器支持或不支持某种声明或样式的特殊用法。 1、常用过滤器： 2、使用IE条件语句过滤 常用过滤器： IE7版本浏览器专用过滤器。 专门为IE7版本浏览器定义样式过滤器。可以兼容即将上市的IE8版本浏览器. *+html body(可替换任意选择器){ Background:blue; } 兼容原理： “*”符号在IE浏览器中被认为是根节点，所以它可以包含html元素，而对于非IE浏览器会认为它是非法的，从而忽略了这个选择器所定义的样式。同时IE6及其以下版本浏览器不支持相邻选择器（+） IE6及以下版本浏览器专用过滤器。 *html body(可替换任意选择器){ Background:blue; } 兼容原理： IE7不支持*通用符号包含html元素 IE7及非IE浏览器专用过滤器。 html body(可替换任意选择器){ Background:blue; } 兼容原理： IE6及其以下版本不支持子选择器，所以会忽略该过滤器定义的样式。 非IE浏览器专用过滤器。 html /**/body(可替换任意选择器){ Background:blue; } 兼容原理： 增加了空白注释/**/iE浏览器会忽略该样式的存在。 使用IE条件语句过滤 IE条件语句就是IE浏览器自定义的一套逻辑语句，可以更加有效的为IE系列版本浏览器定义样式。 !—[if IE] h1所有IE版本的浏览器可识别/h1 ![endif]-- 说明：其它浏览器认为是注释，就忽略掉了。 条件语句中的修饰性关键字： Lte:小于或等于某个版本的IE浏览器 Lt:小于某个版本的IE浏览器 gte:大于或等于某个版本的IE浏览器 gt:大于某个版本的IE浏览器 ！不等于某个版本的IE浏览器 !—[if IE 5.0] h1所有IE5.0版本的浏览器可识别/h1 ![endif]-- !—[if IE 5] h1所有IE5.0与IE5.5版本的浏览器可识别/h1 ![endif]-- !—[if gt IE 5] h1所有IE5.0及IE5.5版本以上的浏览器可识别/h1 ![endif]-- !—[if IE 6] h1所有IE6版本的浏览器可识别/h1 ![endif]-- !—[if lt IE 6] h1所有IE6以及IE6以下版本的浏览器可识别/h1 ![endif]-- !—[if gte IE 6] h1所有IE6以及IE6以上版本的浏览器可识别/h1 ![endif]-- !—[if lt IE 7] h1所有IE7以及IE7以下版本的浏览器可识别/h1 ![endif]-- !—[if gte IE 7] h1所有IE7以及IE7以上版本的浏览器可识别/h1 ![endif]-- 为某个版本的IE浏览器定义样式，把样式表放置在IE条件语句中即可。 !--[if IE 7] link href=“css/css.css” rel=“stylesheet” type=“text/css” ![endif]-- *