网页设计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 标准网页布局的兼容性处理
常用过滤器
目前全球设计师发现并总结出来的过滤器非常多,要记住这些过滤器是很繁琐的,读者可以参阅/ref/css/filters/
3
1 标准网页布局的兼容性处理
常用过滤器
/dithered/css_filters/css_only/
4
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 标准网页布局的兼容性处理
常用过滤器
IE 6及其以下版本浏览器专用
<style type="text/css">
* html body {
background:red;
}
</style>
不过从语法角度分析,IE 7应该支持*通用符号包含html元素,但事实上并不支持,所以这也是一个很有趣的过滤器。
6
1 标准网页布局的兼容性处理
常用过滤器
IE 7和非IE浏览器专用
<style type="text/css">
html>body {
background:green;
}
</style>
兼容原理:
因为IE 6及其以下版本浏览器不支持子选择器,所以会忽略该过滤器定义的样式。
7
1 标准网页布局的兼容性处理
常用过滤器
非IE浏览器专用
style type="text/css">
html>/**/body {
background:yellow;
}
</style>
在IE 8中存在问题,需要使用其他方法。
8
1 标准网页布局的兼容性处理
使用IE条件语句过滤
IE条件语句是IE浏览器自定义的一套逻辑语句,利用这些语句可以更加有效的为IE系列版本浏览器定义样式。
IE条件语句实际上就是HTML注释语句,只不过在注释标识符中增加了一组关键字,这一组关键字对于IE浏览器来说是有效的,但是对于其他浏览器来说,则被视为注释信息完全忽略。由于IE浏览器能够根据条件语句中设置的条件决定解析的版本,从而实现利用条件为不同IE版本浏览器定义样式的目的。
<!--[if IE]>
<h1>所有IE版本浏览器可识别</h1>
<