文章里面有些是自己写代码中遇到的,但更多的是从网上收集而来,然后自己测试后在记录上去(也蛮累的)
边写边记吧...........
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.οnlοad=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>
4270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
