ie6
文章里面有些是自己写代码中遇到的,但更多的是从网上收集而来,然后自己测试后在记录上去(也蛮累的)
边写边记吧...........
1 .ie6下的select问题
当div模拟一个层的时候, 遇到select的时候,select会穿透层
解决方法
1。隐藏select,关闭层的时候在显示出来......(好象一般都不这么做)
2。用iframe,可以参看我那个lightbox效果,搞一个透明的,然后在上面放层..
2 .ie下有些元素不能用innerHTML,因为他是只读的
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
解决方法
可以用dom操作才实现需要。。。。。。。。
3 .ie6下背景图片不被缓存,如果有鼠标事件鼠标放上去,可能会闪烁
解决方法
document.execCommand("BackgroundImageCache", false, true);
4 .ie下创建table元素的时候可能会看不见
解决方法
创建一个tbody标签,把tr和td放里面..........
5 .ie6下不支持position:fixed
解决方法
没有什么解决办法,具体问题,具体分析
6 .在ie6,7下给元素设置属性的时候,如果是dom元素,ie8,ff,chrome会自动把dom元素转成字符串
解决方法
(这个也不算什么bug,但是在用的时候不注意还是会出错,所以记录下来)
可以判断下是不是objct,是的话就转成字符串
7 .在ie下创建input标签的时候,设置type属性在添加到父元素之后会出错.
解决方法
在被添加到父元素之前设置type属性....
8 .在ie下如果一个div没有设置背景,且设置了 position:absolute,在设置onclick事件,
这时,无法触发事件,只能在边框的地方触发事件..........
解决方法
加个背景色,或者背景图片
9 .ie下有些属性用可能无法用 getAttribute读出来(具体有哪些,我也不知道)
解决方法
用属性集合来读取 一个例子
<body>
<form action="/post/" method="post" id="form1" name="form1">
<input type="hidden" name="action" id="action" value="aaaaaaaaa" />
</form>
<script language="JavaScript">
<!--
alert(document.form1.getAttribute('action'));
alert(document.form1.attributes["action"].value)
alert(document.form1.action.value);
//-->
</script>
</body>
10 .ie6,7下, checkbox和radio 经过一些dom操作以后会会自动恢复成defaultChecked的状态
解决方法
具体问题具体分析
11 .ie6下,将一个元素设置成position : "absolute",在window.onscroll的事件中重绘元素,元素会一直跟着滚屏(表达不好,见下面代码吧)
解决方法
不知道,只做记录(最好不重绘吧) 例子
<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
body{height:2000px;width:2000px;}
#a{width:300px;height:100px;background:red;}
</style>
<script>
window.onload = function(){
var a = document.getElementById('a');
a.style.position = 'absolute';
a.style.right = '0';
a.style.bottom = '0';
window.onscroll = function(){
a.innerHTML = '';
}
}
</script>
<div id='a'></div>
</body>
</html>
12 .ie6下,<a>标签内嵌套<label>标签将无法跳转
解决方法
用span代替lable标签吧 例子
<a href="http//www.baidu.com"><label>asd</label></a>
13 .ie6,7下,动态修改name属性后引发的问题,描述不好 直接看英文文档
Microsoft JScript® allows the name to be changed at run time. This does not cause the name in the programming model to change in the collection of elements, but it does change the name used for submitting elements.
解决方法
没什么解决方法,当bug记录 一个例子
<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form id="tf">
<input id="te" type="text" name="ss" value="123" />
</form>
<script type="text/javascript">
<!--
window.onload=function(){
var te = document.getElementById('te');
var tf = document.getElementById('tf');
te.setAttribute('name', 'key');
alert(te.name)
alert(tf.key)
alert(tf.ss)
}
//-->
</script>
</body>
</html>
14 .ie下在加载的时候(还没加载完)添加元素,导致ie终止操作
解决方法
在window.onload里面添加元素 例子
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div>
<script type="text/javascript">
document.body.appendChild(document.createElement("div"));
</script>
</div>
</body>
</html>
bug越来越难找了...............
------------------------------------------------------------------------------------------------------------------------------ 华丽的邪恶分割线
CSS
1 .在ie6下,浮动元素的双倍margin,产生条件如下 必须是flaot块元素,margin和float方向想同,旁边必须是父元素才行。
<!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=gb2312" />
<title></title>
</head>
<body>
<div style="height:100px; width:100px; border:1px solid #000000; ">
<div style="height:20px;width:20px; border:1px solid #000000; float:left; margin-left:10px;"></div>
</div>
</body>
</html>
解决办法
把浮动元素设置成 display: inline
2 .在IE6中,PNG图片原本透明的部分被渲染成不透明的颜色
解决办法还在寻找中(这本身就是个扯皮的事情)
3 .在IE6中,有盒模型bug 如div#box { width: 100px; border: 2px solid black; padding: 10px; }
其他浏览器下是100+2+10=112,在ie6下是100
解决办法
加入头文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(我好象一直都有加这个,不过做为一个错误还是记录下来)
4 .在IE6中,div中最底高度不能低于12px
<div style="height:5px; width:5px; background-color:#000000">
解决办法
设置div的overflow:hidden (传说line-height: 0也可以,但是我怎么测试不出来...............)
5 .在IE6中,只有a元素支持CSS hover效果
可以看一下 除了ie6下,别的ie7,8,ff3,chrome都是正确的
<!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=gb2312" />
<title></title>
<style type="text/css">
div{height:100px;width:100px;background-color:#006600;}
div:hover{background-color:#FF0000;}
</style>
</head>
<body>
<div></div>
</body>
</html>
解决办法
没什么具体的解决办法,具体问题具体分析
6 .在IE6中,当浮动元素和非浮动元素并排的时候,会产生3象素的误差
例子没有 网上例子看了很多 但是不明白这个bug想说明什么,有什么意义 暂时不记录
7 .这个bug在IE6中存在。学名叫捉迷藏bug.在特定条件下,标准布局页面被刷新或重新下载时,会发现某些内容消失了,当再次刷新或选中时才会显示出来
这个的例子还没想好怎么写,但是我在实际中确实出现过,可以看我写的在线文本编辑器的选择连接按纽,有时候确定图片看不见的,刷新就可以了,我一直也不知道原因,现在算是知道了,不过还得想办让它重现.
解决办法
去除父元素的背景色,或为父元素制定固定高度和宽度,也可以为浮动元素和父元素定义 position:relative来避免此类问题发生
8 .在ie6下,当把元素设置成position:relative;而他的父元素又有overflow:scroll/auto,该元素不会随着滚动条移动而移动
一个例子
<!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>
<title></title>
<style type="text/css">
#ss{height:300px;width:300px;background-color:#FF0000; overflow:scroll;}
#ss div{height:30px;width:30px; background-color:#990000;position:relative;}
</style>
</head>
<body>
<div id='ss'>
<div></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
解决办法
只是当一个bug来记载,现实中谁这么用啊
9 .在ie6下,元素可以元件的高度比指定的要长得多。元件的宽度也可以比指定的要长得多。
一个例子
<!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>
<title></title>
<style type="text/css">
div{height:30px;width:30px;background-color:#FFFF00}
</style>
</head>
<body>
<div>
asddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
asddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
asddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
asddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
</div>
</body>
</html>
解决办法
实际项目中,应该是把高,宽设置成auto才对,应该说ie6下更人性化一些.........
10 .在ie6下,设置a的position: relative; 在a的hover上设置display: block;并设置一个宽度 鼠标放上去后会挂掉
一个例子
<!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>
<title></title>
<style type="text/css">
a {position: relative;}
a:hover {display: block;width: 5px;}
</style>
</head>
<body>
<div><a href="#">Foo Bar</a></div>
</body>
</html>
解决办法
不设置宽度就好了,在说干嘛要这么设置了.......
11 . 在ie6下,没有最小宽度 和最大宽度/高度的设置(min-width;max-width;min-height;max-height)但有时间这些样式又是很有用的,如 div的宽度用百分比来定位置,但是最小宽度又不能小于500px,这时候min-width就可以用上了(可惜了ie6不支持)
一个例子
<!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>
<title></title>
<style type="text/css">
div{height:100px;width:90%;background-color:#0000FF;min-width:300px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
解决办法
不支持就只能模拟了嵌套一个div 代码如下
<!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>
<title></title>
<style type="text/css">
#ss{height:100px;width:90%;background-color:#0000FF;}
#ss div{ height:100%;width:400px;}
</style>
</head>
<body>
<div id="ss"><div><div></div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。
相关推荐
IE6,IE7,IE8,IE9绿色版(单个exe文件,不与系统中浏览器冲突) 现在大多数系统都已经用IE了,对于开发人员需要测试与IE的兼容性找一款IE的操作系统比较困难. 网上找到的都说用IETester,但我实际测了并不能百分百还原IE...
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更新 9 1. 方框模型溢出内容现与方框相交,不再让方框自动增长适应内容。 9 2. 不再支持某些 CSS 筛选器(如 *HTML、_underscore 和 /**/ 注释)。 11 3. 已解决SELECT 元素不能被div覆盖的问题。 14...
如果你自己是做网页设计的,当然也希望只在自己的电脑上就能看清楚页面在IE6、IE7、IE8、FireFox等浏览器下的效果啦~~可是,微软偏偏要我们割爱,安装了IE7后,IE6也在我们的电脑中消失了。而对很多像我这样的人来...
您好:尊敬的访客,您正在使用IE6,无法继续浏览本站。强烈建议您选用符合标准的浏览器,2345浏览器、百度浏览器、360浏览器,或升级到 最新版本的IE。
windows2003 sp2 将自带ie6,升级为ie8。
IE6绿色版,免安装,兼容Win7。专用于部分只能在IE6上运行的老系统。
ie6 ie5 ie4浏览器兼容ie7,程序员和设计师的测试必备工具
通过注册表修复ie6 txt修改成reg,双击导入即可。
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
IE 6主要是解决web前段开发时候的 浏览器兼容问题 这个软件这win8 上面的ie6 我把它分享给大家 让用win8 做web开发的小伙伴不在烦恼;
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
ieTest ie6 ie7 ie8 ie9 ie5.5
IE6、IE7、IE8对css和js支持方面差异的研究
IE6 for WIN7(win7下测试ie6兼容神器,64&32亲测可用,基于虚拟机,准确度100%)
做前端的恐怕有很多时间折腾在IE6上,装win7、win8的同学更苦逼,没有真实的测试环境,还得通过装虚拟机之类的解决,前些时候写过一篇文章,分享一款Win7下的IE6测试工具:IE6forWin7,但是最近安装win8后,发现IE6...
ie6浏览器下载,不用卸载其他浏览器。很强大!!!!!!!!!!!!!!!!!!!!
判断ie6,区分ie6浏览器,js判断ie6,正则判断ie6
IE6绿色版(www.X-Force.cn).
解决IE兼容IE6,IE7,IE8,IE9,IE10js文件