`
zl198751
  • 浏览: 278718 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

ChromeCSSIEFirefoxXHTML 
阅读更多

首先必须说的是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>
<html xmlns="http://www.w3.org/1999/xhtml"><body xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml"><img width=’77’ height=’5’ src=’chrome://livemargins/skin/monitor-background-horizontal.png’ style=’position: absolute;left:-77px;top:-5px’/> <img src=’chrome://livemargins/skin/monitor-background-vertical.png’ style=’position: absolute;left:0;top:-5px;’/> <img id=’monitor-play-button’ src=’chrome://livemargins/skin/monitor-play-button.png’ onmouseover=’this.style.opacity=1’ onmouseout=’this.style.opacity=0.5’ style=’position: absolute;left:1px;top:0;opacity:0.5;cursor:pointer’/>

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 >  

分享到：
| jquery的thickbox使用技巧汇总
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    使IE5,IE6,IE7,IE8兼容到IE9模式 &lt;!–[if lt IE 9]&gt; ”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”&gt;&lt;/script&gt; &lt;![endif]–&gt; 解决PNG显示问题 只需将透明png图片命名为*-trans.png 需要注意...

    解决各种IE兼容问题_IE6_IE7_IE8_IE9_IE10

    例如，如果你发现网页在IE8及更高版本中出现问题，而希望其行为与IE7相似，可以使用`IE=EmulateIE7`。 除了指定特定的兼容性模式，还有其他一些选项： 1. `IE=8`：这将强制IE8使用其自身的标准模式，而不是更旧的...

    ie6 ie7 ff浏览器兼容

    ### 浏览器兼容性问题解析：针对IE6、IE7与Firefox的样式处理 在Web开发中，浏览器兼容性始终是一项重要的考虑因素。不同浏览器对CSS的支持程度不一，尤其是对于早期版本的Internet Explorer（IE）如IE6、IE7，以及...

    IE6, IE7, IE8 CSS 兼容速查表

    在网页设计领域，Internet Explorer（简称IE）的6、7、8版本曾是开发者们面临兼容性问题的主要挑战。这三款浏览器虽然在当时占据了一定的市场份额，但它们对CSS（层叠样式表）的支持程度并不理想，导致开发者需要...

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer（如IE6、IE7、IE8）与现代浏览器（如Firefox、Chrome等）之间的样式差异时，CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例，帮助...

    IE6、IE7、IE8对css和js支持方面差异的研究

    在探讨IE6、IE7、IE8对CSS和JavaScript支持的差异时，我们可以发现一系列显著的兼容性问题和解析规则的变化。以下是对这些差异的详细分析： 1. **JavaScript性能和垃圾收集**： - 在IE6中，JScript引擎在处理大量...

    ie6与ie7 8区别

    ### IE6、IE7与IE8的区别 #### 浏览器兼容性问题解析 随着Web技术的不断发展，浏览器之间的差异也日益明显。特别是在早期的浏览器版本中，如Internet Explorer（简称IE）的不同版本之间，存在着显著的差异。本文将...

    解决IE6、IE7、IE8样式不兼容问题

    ### 解决IE6、IE7、IE8样式不兼容问题：深入探讨与实践 #### 一、引言 在Web开发领域，确保网页在不同浏览器中的兼容性一直是一大挑战，尤其是在面对老旧的IE浏览器（IE6、IE7、IE8）时。这些浏览器由于其过时的...

    ie6windows绿色免安装完美兼容IE8

    此版本的IE6声称能够与更新的IE8浏览器完美兼容，这意味着用户可以在使用新功能的同时，仍然能测试或体验旧版IE6的行为。 描述中提到的“就1个文件”是指这个绿色版的IE6可能包含了一个可执行文件，用户只需双击...

    兼容IE6,IE7,IE8和Firefox的图片上传预览效果

    标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...

    验证码IE7、IE8兼容

    7. 测试与调试：使用IE7和IE8的模拟器或真实环境进行测试，确保验证码在各个浏览器版本中的表现一致。使用开发者工具检查错误和警告，及时修复。 通过以上策略，可以有效解决验证码在IE7和IE8中的兼容性问题，确保...

    [删除] IE6,IE7,IE8,IE9(绿色单文件版本,分2个压缩包)1

    IE6,IE7,IE8,IE9绿色版(单个exe文件,不与系统中浏览器冲突) 现在大多数系统都已经用IE了,对于开发人员需要测试与IE的兼容性找一款IE的操作系统比较困难. 网上找到的都说用IETester,但我实际测了并不能百分百还原IE...

    网页设计ie调试工具，兼容ie5.5,ie6,ie7,ie8

    网页设计ie调试工具，兼容ie5.5,ie6,ie7,ie8

    IE7与IE8的兼容性 配置文档

    ### IE7与IE8的兼容性挑战 IE7发布于2006年，而IE8则在2009年问世。这两个版本之间最大的区别在于对Web标准的支持程度。IE8引入了对HTML5部分特性的支持，增强了对CSS2.1和CSS3的兼容性，并改进了JavaScript引擎，...

    IE兼容IE6,IE7,IE8,IE9,IE10js文件

    "IE兼容IE6,IE7,IE8,IE9,IE10 js文件"的标题和描述提示我们，这个压缩包可能包含了一系列专门用于解决这些版本之间兼容性问题的JavaScript脚本。 JavaScript是一种广泛用于网页和网络应用的编程语言，它的主要功能...

    IE6绿色版(可与IE7、IE8共存）

    如果你自己是做网页设计的，当然也希望只在自己的电脑上就能看清楚页面在IE6、IE7、IE8、FireFox等浏览器下的效果啦～～可是，微软偏偏要我们割爱，安装了IE7后，IE6也在我们的电脑中消失了。而对很多像我这样的人来...

    bootstrop兼容IE8的代码

    4. **jQuery版本**：Bootstrap 3需要jQuery 1.9.1及以上版本，但要注意，某些旧版本的jQuery可能与IE8存在兼容性问题。选择一个支持IE8的jQuery版本是必要的。 5. **CSS polyfills**：可能需要为IE8添加一些CSS3...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器"，这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**： DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

    CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法

    在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时，我们需深入理解不同浏览器对CSS的支持差异，以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析： ### 1. 了解...

    IE6 for WIN7(win7下测试ie6兼容神器，64&32可用)

    在这种情况下，IE6被安装在一个虚拟的Windows系统中，确保了与真实环境下的IE6兼容性测试的一致性和准确性。 压缩包中的“IE6.exe”很可能是一个安装程序或者启动虚拟机环境的执行文件。这可能是一个自解压文件，...

Magicbox
Global site tag (gtag.js) - Google Analytics