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 >