IE7,IE8与IE6兼容路上的痛苦

101 篇文章 1 订阅
41 篇文章 0 订阅

首先必须说的是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 >   

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值