IE7,IE8與IE6相容路上的痛苦
首先必須說的是IE6真得很垃圾，存在太多讓人意想不到的bug，但是他主流所以沒辦法。
1. 首先是position：fixed屬性，在ie6中沒有這個屬性，所以需要在ie6中實現可以有2種方式：
a. js方式實現，這樣的好處不會影響其他元素，缺點會有dom移動的痕跡，畢竟是監聽滾輪移動不是實時觸發的。
實現過程：例如現在想讓dom時刻現實在視窗底端，那麼需要監聽滾輪移動實時修改dom的top值。
dom設定成position=absolute。
具體程式碼：
function position_fixed(el){
// check is IE6
if(!window.XMLHttpRequest) {
alert(’ie6’);
window.onscroll = function(){
var b = (document.documentElement.scrollTop + document.documentElement.clientHeight - 25)+"px";
el.css({top:b});
}
}
}
b. css方式實現，這樣會需要修改body和 html的屬性，有可能造成整個頁面的css混亂 。
實現過程：
html{overflow:hidden;}
body{height:100%;overflow:auto;}
修改html屬性，讓html的現實完全等於body，再讓body高度100%，然後設定需要fixed的dom的position=absolute。
這樣dom會隨body的高度變化而變化。
具體程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 position:fixed bug</title>
<style>
* {
padding:0;
margin:0;
}
#rightform {
text-align:center;
padding:50px;
font:14px/22px Georgia, "Times New Roman", Times, serif;
height:1200px;
background:#ffc;
}
#rightform h1 {
font-family:arial;
background:#e8edef;
height:300px;
line-height:300px;
margin-bottom:200px;
}
#rightform p {
line-height:1.5em;
background:#ffdfff;
padding:90px 0;
}
#rightform form {
background-color:#ddd;
padding:10px 20px;
border:1px solid #aaa;
position:fixed;
right:30px;
top:120px;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<h1>
<a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
</h2>
<p>position:fixed; vs position:absolute;<br />
Created by <a href="http://blog.happinesz.cn/" title="sofish">sofish</a> from <a href="http://www.happinesz.cn/" title="blog">幸福收藏夾</a></p>
<form id="g_search" method="get" action="#">
<input id="g_s" name="g_s" type="text" value="" />
<input id="g_submit" name="g_submit" type="button" value="search" />
</form>
</div>
</body>
</html>
2. <a href=’javascritp:void(0)’/>. 當希望點選超連結的時候，a標籤不跳轉很多人使用javascritp:void(0)這樣的函式，但是ie6偏偏不支援，所以應該換成<a href=’#’>;
3. ie6又一大惡行，css繼承關係與ie7，ie8不一樣，具體的bug發生的時候需要用firebug解決，分析css繼承結構。
4. 又是一大惡行，ie6的select標籤。ie6不識別select的z-index，所以當有select的時候會越在所有的div之上。解決方法是把 select用iframe包裹現實，實用工具包：bgiframe_2.1.1.zip
5. ie6是沒有trim()函式的，如果要實現trim的功能可以藉助var str=“ zhang ”;
str = str.replace(/^\s\s*/, ’’).replace(/\s\s*$/, ’’);
6. ie和firefox的區別 onchange事件： 在ie中若 頁面載入後滑鼠聚焦在input元素 上，填寫內容後input 元素失去焦點，這個時候是不會觸發onchange事件的，但在firefox中是會觸發onchange的事件的。若要實現input元素內容一改變就 觸發的事件需要使用onpropertychange事件。
7. Ie6的url下載是中文的話，最後一個字元遊覽器不識別，解決方法：
將A標籤的屬性拿出來封裝成FORM提交。
function linkClick(linkObject) {
var formObject = document.createElement(’form’);
document.body.appendChild(formObject);
formObject.setAttribute(’method’, ’post’);
var url = linkObject.href;
var uri = ’’;
var i = url.indexOf(’?’);
if(i == -1) {
formObject.action = url;
} else {
formObject.action = url.substring(0, i);
}
if( i >= 0 && url.length >= i + 1) {
uri = url.substring(i + 1, url.length);
}
var sa = uri.split(’&’);
for(var i = 0; i < sa.length; i++) {
var isa = sa[i].split(’=’);
var inputObject = document.createElement(’input’);
inputObject.setAttribute(’type’, ’hidden’);
inputObject.setAttribute(’name’, isa[0]);
inputObject.setAttribute(’value’, isa[1]);
formObject.appendChild(inputObject);
}
formObject.submit();
return false;
}
HTML：
< a href = ’./servlet/MyServlet?name=世界&id=1’ onclick = "return linkClick(this)" > click me </ a > < br >