IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6 中查看使用 Microsoft JScript 的网页,可能会遇到 web 浏览器速度较慢的性能问题。原因是如果 js 脚本同时创建大量变量,jscript 引擎执行垃圾收集算法时会监视脚本中变量分配的数量、脚本中使用的文字值的数量和脚本中分配的字符串值的总大小,如果超过这些值的阈值,就会发生垃圾收集,垃圾收集进程会中断正在运行的脚本。因此,这些运行中的脚本将被挂起,直至垃圾收集完成为止。
IE6 、 IE7 、 IE8 在 CSS 和 JS 方面的区别 :
1、IE8 中的 css 中关于 width 或是 height 中如果使用像素形式作为参数时,参数必须是带“px”的,而且此参数必须是大于 0 的,而在 IE6 和 IE7 中是支持不带“px”参数的,而且参数是可以为一个负数。
2、如:style=height:180px\\0; 只有 IE8 能识别,style=height:180px\\9,IE 都能识别。
2、IE8 中的 css 中“border-style:outset ;”是没有效果的。
3、IE8 中的无序列表之间的距离要比 IE6 和 IE7 大的多。
4、IE6 能识别 *,但不能识别!important,IE7 能识别 * 也能识别!important。
5、IE6 支持下划线,IE7 不支持下划线。
6、在 IE8 中,一个 Iframe 中取 event.x 的值不是 Iframe 中的相对 x 坐标,而是最外层的 window 的 x 坐标,但是 event.y 却是取的是 Iframe 中的相对 y 坐标。而在 IE6 和 IE7 中,event.x 和 event.y 却得的都是所在 Iframe 中的相对坐标,可以用 event.clinetX 代替。
7、IE8 中的 javascript 中的 function 对象例如:
function a(){alert(“helloworld”);}
var fun = new function(‘’,’helloworld’);
alert(fun);
此时返回的值为 function anonymous(){function a(){alert(“helloworld”)}}, 而在 IE6 和 IE7 中返回的值为 function anonymous(){alert("helloworld")}, 也就是说当 Function 的第二个参数如果是一个函数时,IE8 对此参数作用的是整个函数的代码,而 IE6 和 IE7 则是对此参数起作用的是函数的内部代码(不包括 “function a(){”和“}”的函数头和尾)。
8、在 ie6 中,使用 window.status ="欢迎光临我的博客!!!", 就能在状态栏显示这么一行字,但在 IE7 中,IE7 的安全性设置中,默认是不允许脚本更新状态栏的.
9、IE8 会把对 IE6,7,8 用 css 进行测试:
测试代码:样式代码: p {color:#f00;} xhtml 代码:
文字
IE6 |
IE7 |
IE8 |
备注 |
|
p{_color:red} |
√ |
× |
× |
IE6 专用 |
*html p{color:#red;} |
√ |
× |
× |
IE6 专用 |
p{+color:red} |
√ |
√ |
× |
IE6,7 专用 |
p{*color:red} |
√ |
√ |
× |
IE6,7 专用 |
*html p{color:red;} |
√ |
√ |
× |
IE6,7 专用 |
p{*+color: red} |
× |
√ |
× |
IE7 专用 |
Body> p{color: red} |
× |
√ |
√ |
屏蔽 IE6 |
/*\\*//*/p{+color:red}/**/ |
× |
× |
√ |
IE8 专用 |
p{/*/*/color;/**/} |
√ |
√ |
× |
屏蔽 IE8 |
p{color:red!important} p{color:red} |
√ |
√ |
√ |
都能用 |
html>/**/body .head{color:#red;} |
× |
× |
√ |
只对 IE8 |
对于 IE8 对 js 新增的功能 :
1、 IE8 开始支持一些新的 W3C 规格,其中多了 querySelector 和 querySelectorAll 两个函数
2、 IE8 引入 XDomainRequest 跨站数据获取功能。 这是一个非常有趣的进行跨站数据获取的功能,不过它与 Firefox 3 中的跨站 XMLHttpRequest 的工作原理不太一样。它的跨域并不是无限制的。需要服务端返回 http header 中带有 XDomainRequestAllowed=1 才可以跨域,否则是不成功的。XMLRequest 不能跨站一直都是多子域服务器的硬伤。使得很多情况不得不考虑最原始的动态 script 和 JSON 的方式。不过 IE8 团队有意解决跨站访问数据的问题,这是 IE8 的一个进步。另外,IE8 下的 XMLHttpRequest 增加了一个很重要的属性 timeout 和 ontimeout 方法,它在对程序进行优化时极其重要。
3、 getElementById 可以通过 id 来返回对象。getAttribute("checked") 现在返回“checked”而不是 true。动态创建(或修改)的单选按钮现在可以被选择了。
支持更多对 HTML5 的功能:
1、 window.location.hash。这个功能已经被多数浏览器支持的非常好。在 IE8 标准模式中将 window.location.hash 中的更改作为导航,并保存先前文档的 URL,可以像在 Ajax 应用中模仿“后退”按钮效果。IE8 中对它进行了改良,可以广播这个 hashchanged 时间。
2、 DOM 存储。通过这个功能,数据可以持续保存在本地,它将取代原始的 cookie 存 DOM 存储。
3、 postMessage。IE8 现在支持跨文件消息通讯(Cross-Document Messaging-XDM)!通过 onmessage 事件和 postMessage 方法,两个来自不同域的网页可以进行通讯。目前 IE8、Opera 9、Firefox 3 和 WebKit nightlies 版均支持这个功能,也就是说,该功能几乎已被所有最新浏览器支持。
4、 Offline Events。在 IE 8 中拥有一些离线事件来检测网络的中断,通过它我们可以编写精彩的离线 Ajax 应用。目前来看支持这一功能的浏览器包括 Firefox3 和 IE8。
用 firefox 或者 chrome 一登陆最小系统就报 480 分钟超时错误
IE6 Bugs
1 、不支持用样式设置 <abbr> 元素
2 、不支持以连字符和下划线开头的 class 和 ID 名
3 、 <select> 元素总是出现在堆叠最上面,而无视 z-index 值
4 、如果锚点的伪类没有使用正确的顺序 ( :link , :visited , :hover ) ,:hover 伪类将无效
5 、一个属性的 !important 声明会被同一规则中同一属性的没有使用 !important 的第二个声明覆盖。
6、 height 表现类似于 min-height , width 表现类似于 min-width ,左右 margin 双倍
7、 圆点边框 (dotted) 看起来像虚线边框 (dashed)
8、 text-decoration 的 line-through 值在文字上看起来比别的浏览器要高一些
9 、有序列表如果有一个固定结构 (haslayout 为 true ,不能设置 li 的高度 / 宽度 /zoom 等激活 haslayout 的值 ) ,序号就不会增加,而是保持为 1
10、 列表元素不支持 list-style-type 的所有可用的值
11、 如果列表条目浮动,指定的 list-style-image 将不会显示
12、 不完全支持 @font-face
13、 某些选择器会错误的匹配注释和文档声明
14、 如果一个 ID 选择器结合一个类选择器不匹配,同样的 ID 选择器结合不同的类选择器也将被当作不匹配。
IE7 bugs
1 、 有序列表如果有一个固定结构 (haslayout 为 true ,不能设置 li 的高度 / 宽度 /zoom 等激活 haslayout 的值 ) ,序号就不会增加,而是保持为 1
2、 列表元素不支持 list-style-type 的所有可用的值
3 、如果列表条目浮动,指定的 list-style-image 将不会显示
4 、不完全支持 @font-face
5 、某些选择器会错误的匹配注释和文档声明
IE8 新增的 javascript 函数:可参考 http://blog.csdn.net/WinGeek/archive/2009/02/26/3937909.aspx 。