网页设计教程-教你从最开始了解DIV+CSS[附讲|关于IE hack兼容性修改]

水月あ无痕

本讲主要讲解制作网页完成后的兼容性调试问题

什么是兼容性测试?

兼容性测试是针对各个不同浏览器(FF,OP,IE),在不同分辨率下进行的对网页的整体测试,主要测试的内容是是否在不同浏览器下有兼容性问题(如框架错位,下移浮动等)

兼容性测试的一般步骤是什么?

这里就要提到浏览器对W3C标准的遵守程度,即OP>FF>IE
又由于FF和IE的使用范围广,并且FF的测试插件比较多,所以选用FF作为制作网页时首选的测试浏览器.
在对FF的测试完成无错误后,再对IE进行修改,使之无兼容性问题

什么是IE hack?

IE hack是一种在CSS和HTML中使用的,针对兼容性问题进行修复的语句.它的表现形式多种多样,如特殊字符(*,+,_等),条件语句判定(<--if-->语句).

下面我们来介绍几种常见的IE hack

在CSS中使用的hack:

在CSS中使用的hack,原理是不同的浏览器对各种字符的识别不同,因而自己编写产生的.

一些常用的特殊字符识别表如下:

　　IE都能识别*，标准浏览器(如FF)不能识别*
　　IE6能识别*，但不能识别 !important
　　IE7能识别*，也能识别!important
　　FF不能识别*，但能识别!important
　　IE6支持下划线，IE7和Firefox均不支持下划线

书写顺序:Firefox的写在前面，IE7的写在中间，IE6的写在最后面。

*的用法示范:

background:orange;
*background:green;

区别IE和FF
因为FF不能识别*,所以这里IE可以用*来区分开FF和IE

!important的用法示范:

background:orange;
*background:green !important;
*background:blue;

区别IE6,7,FF
因为FF不能识别*,所以下面两行针对了IE系列,又!important针对的是IE7,所以区分出了IE7.

_的用法示范

background:orange;
*background:green;
_background:blue;

因为IE6能识别下划线
这样也能区分开三类浏览器

IE的if条件语句:

IE的if条件语句也常用,不太好的地方是会多出两个分别针对IE6,7的CSS,对网站的评分会降低


所有的IE可识别

<!--[if IE]> Only IE <![endif]-->

仅IE6可识别

<!--[if lt IE 6]> Only IE 6- <![endif]-->

IE6以及IE6以下的IE5.x都可识别

<!--[if gte IE 6]> Only IE 6/+ <![endif]-->

仅IE7可识别

<!--[if lte IE 7]> Only IE 7/- <![endif]-->

更多的IE hack可以参照这里
http://andymao.com/andy/post/76.html

希望大家喜欢本讲的内容