在前台开发过程中,最令程序员抓狂的便是浏览器的兼容问题,不仅有不同浏览器之间的兼容问题,还有同一个浏览器不同版本之间的兼容问题,为此,我们要想让所写程序适用于所有浏览器才行,这就涉及到了调试。写完一个页面我们需要在各个主流浏览器中跑一下,如IE、火狐、Google等,今天我要说的是,如何方便的测试IE不同版本的兼容性。
1.首先我们来看一段有兼容问题的html代码(红色字体有兼容问题)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.οnlοad=function(){
var oUl=document.getElementById("ull");
var aLi=oUl.childNodes;
for(var i=0;i<oUl.childNodes.length;i++){
oUl.childNodes[i].style.background='red';
}
};
</script>
</head>
<body>
<ul id="ull">
<li>aaa</li>
<li>bbb</li>
</ul>
</body>
</html>
2.我们在IE高版本(IE11)下浏览的效果图如下,另外IE10、IE9都是这种效果,可见,并没有给li成功添加红色背景。
3.我们再看看在IE8下面的效果图,这是正确的效果图。
4.那么我们怎样在高版本的IE上查看低版本的IE显示效果呢?如下图所示,我们可以看到图的右下角有个红色方框框住的下拉列表,里面包含了IE11、IE10、IE9、IE8、IE7、IE5,足够我们进行各个不同版本的兼容性测试了。需要用哪个版本就选择哪个版本就行了,是不是非常方便啊