首先必须说的是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
>
分享到:
相关推荐
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
IE6, IE7, IE8 CSS 兼容速查表
使IE5,IE6,IE7,IE8兼容到IE9模式 <!–[if lt IE 9]> ”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script> <![endif]–> 解决PNG显示问题 只需将透明png图片命名为*-trans.png 需要注意...
IE6,IE7,IE8,IE9绿色版(单个exe文件,不与系统中浏览器冲突) 现在大多数系统都已经用IE了,对于开发人员需要测试与IE的兼容性找一款IE的操作系统比较困难. 网上找到的都说用IETester,但我实际测了并不能百分百还原IE...
网页设计ie调试工具,兼容ie5.5,ie6,ie7,ie8
兼容 IE6、IE7、IE8 样式 不兼容 兼容 txt
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
DIV+CSS相对IE6、IE7和IE8的兼容问题
解决IE兼容IE6,IE7,IE8,IE9,IE10js文件
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 1 <!Doctype html> 2 <... 3 <...
项目需要、在网上查找angularjs支持ie低版本的问题(主要是windows7下只有IE8)整理了一个小demo 主要两点 1、ng-app="myApp" id="test11" 加上id="XXX" 加入以下代码注册到页面上 angular.element(document)....
jquery.validate 兼容IE6/IE7/IE8
IE6、IE7、IE8对css和js支持方面差异的研究
这是一个对IE8及以下做前端兼容的文件工具...--对于ie6到ie8做兼容,兼容h5,css3等新特性--> <!--[if (gte IE 6)&(lte IE 8)]> [removed][removed] [removed][removed] [removed][removed] <![endif]-->
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
IE7-IE8 站点 兼容性 Pdf IE7-IE8 站点 兼容性 Pdf
div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf
IE6、IE7、Firefox之间的兼容写法IE6、IE7、Firefox之间的兼容写法
验证码验证、IE7 IE8兼容、有干扰线