关于IE6的那些破事
处理ie6问题的最好策略是修复它,那么该如何去修复ie6的这些问题呢?
【计划一下你的设计并且让他们简单一些】
如果你即将开始提前计划你的设计,请花一点时间考虑一下最好的编程方案,以便可以避免一些布局问题,即使是最复杂的视觉设计也可以通过简单的代码来实现,如果你发现你用了很复杂的Markup,你最好重新看一下你的设计方案。
【使用一个正确的Doctype】
用了一个不正确的Doctype或许会触发ie6的quirks mode并且让你的页面在各个浏览器之前渲染不一致。使用以下的doctypes: HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1
例如:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
【使用渐进增强】
渐进增强简单的意思是对所有用户来说在增加光彩之前确保基本的功能可用,一般来说,渐进增强是指在没有javascript的情况下让互联网应用程序可以工作,通过使用javascript来增加动画、Ajax效果等等;但是说到ie6,渐进增强的另一个原则是使用ie6不支持的css3,html5以及其它网络协议。
【使用CSS Reset规则】
一个简单的reset
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
【为ie6使用条件注释】
<!–[if IE6]>
<link rel=”stylesheet” href=”http://domain.tld/ie6.css”
media=”screen” />
<![endif]–>
css内的ie hack
/* target IE6 */
* html #selector { color: red; }
/* filter IE6 */
html>body #selector { color: red; }
#selector {
width: 200px !important; /* target other browsers */
width: 100px; /* target IE6 and lower */
}
【清除浮动】
.clearfix:after {
content: ” “;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */
【IE的Javascript内存泄露】
由于ie使用它自己的内存管理,所以当操作javascript的时候没有收回内存时或许会产生内存泄露。
Douglas Crockford有一篇文章写了“preventing JavaScript memory leaks in Internet Explorer”.
Taobao Search&AD UED的元璋兄也曾经写了一篇通过try catch来防止ie的内存泄露的文章,看代码吧:
with mememory leak:
function createButton() {
var obj = document.createElement(”button”);
obj.innerHTML = “click me”;
obj.onclick = function() {
//handle onclick
}
obj.onmouseover = function() {
//handle onmouseover
}
return obj;//return a object which has memory leak problem in IE6
}
var dButton = document.getElementsById(”d1″).appendChild(createButton());
//skipped….
without mememory leak:
/**
* Use the try … finally statement to resolve the memory leak issue
*/
function createButton() {
var obj = document.createElement(”button”);
obj.innerHTML = “click me”;
obj.onclick = function() {
//handle onclick
}
obj.onmouseover = function() {
//handle onmouseover
}
//this helps to fix the memory leak issue
try {
return obj;
} finally {
obj = null;
}
}
var dButton = document.getElementsById(”d1″).appendChild(createButton());
//skipped….
引入了finally声明,finnally声明定义了一段语句,这段语句将总是在try语句块后执行完成后来执行。通过这个就可以避免内存泄露,很奇怪吧~