ie7的li:hover问题
<!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" lang="zh-CN">
<head>
</head>
<body>
<style type="text/css">
#list span { left:-999em;position: absolute; }
#list:hover span, #list.on span { left:auto; }
</style>
<ul>
<li id="list">产品介绍<span>产品一</span>
</li>
</ul>
<input type="text"/>
<script>
var o = document.getElementById("list");
o.onmouseover=function() { this.className="on"; }
o.onmouseout=function() { this.className=""; }
</script>
</body>
</html>
ie6和ff都很正常
但ie7就有问题，当把光标放在文本框中，然后再把鼠标放在菜单上，弹出来的菜单就不会消失了
解决方法是去掉#list:hover或者加一个样式在onmouseout中设置
但未知什么原因
ie6的line-height失效问题
<!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>
</head>
<body>
<p style="line-height:30px;"> 服务：
<input name="" type="text"/>
<br />
特别推荐：
<input name="" type="text"/>
<br />
交通停车：
<input name="" type="text"/>
</p>
</body>
</html>
ie7和ff显示正常
但ie6的line-height就没效果
未知解决方法，未知原因
ie高度设置问题
<!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>
<body>
<style type="text/css">
*{ padding:0px; margin:0px;}
html,body{overflow:hidden;height:100%; width:100%;}
</style>
<table style="width:100%; height:100%;" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="height:100px;">22222222222</td>
</tr>
<tr>
<td>mid</td>
</tr>
<tr>
<td style="height:100px;">111111111</td>
</tr>
</table>
</body>
</html>
这是一个全屏的三层样式
ff的效果应该是正确的
但在ie里上下两块的高度都不是设定的100px
未知原因，未有解决方法
js的正则问题
function a(val)
{
var re = /^\d+$/g;
alert(re.lastIndex);
return re.test(val);
}
alert(a(5));
alert(a(6));
用ie的话是0 true 0 true
用ff的话是0 true 1 false
原因没有弄清楚
不过直接用new RegExp的方法能解决
ie透明背景问题
<div style="border:1px solid #000; height:100px; width:100px; position:absolute;" onclick="alert(1)">
click
</div>
ff中正常，在ie中点击div中文字以外的部分会没反应。
如果有background-color就没问题，未知原因。
document.body.appendChild()导致IE已终止操作
以下代码会导致在ie出错“已终止操作”，ff中是没问题的：
<!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>
但脚本如果不套在div里面又没问题，
未知原因，估计跟dom有关（网上说是跟body的加载顺序有关）。
解决方法是body加载完之后执行(ie特有的document.body.onload)，或用insertBefore代替，例如：
document.body.insertBefore(obj, document.body.childNodes[0]);
ie的table的td的宽度问题
<!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>
<table border="1" cellspacing="1" cellpadding="1" width="600">
<tr>
<td width="100" align="right"> 后面空了： </td>
<td> 内容内容内容内容内容内容内容 </td>
</tr>
<tr>
<td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 温馨提示 </td>
</tr>
</table>
<br /><br />
<table border="1" cellspacing="1" cellpadding="1" width="600">
<tr>
<td width="100" align="right"> 后面空了： </td>
<td> 内容内容 </td>
</tr>
<tr>
<td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 温馨提示 </td>
</tr>
</table>
<br /><br />
<table border="1" cellspacing="1" cellpadding="1" width="600">
<tr>
<td width="100" align="right"> 正常正常：</td>
<td> 内容内容内容内容内容内容内容 </td>
</tr>
<tr>
<td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 </td>
</tr>
</table>
</body>
</html>
以上3个table的结构是一样的其中都有一个td是100宽度只是内容不同，
在ff中3个table显示的效果是一样的，但用ie看会发现第一第二个table会无端多出一段空白
解决方法：给table添加样式table-layout:fixed;，未定义时，单元格宽度会按内容宽度的比例自动调整。
ie6/7的hr行距问题
<!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">
<body>
1111111111111111111111111111111
<hr style="margin:0; padding:0;"/>
22222222222222222222222222222222
</body>
</html>
即使给hr设置了margin和padding都是0，但ie6和ie7还有有一个间距。
未知原因，未找到解决方法，建议用div的border模拟。
IE8的链接触发问题
<!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>
<style type="text/css">
a:hover {
background:#000;
}
</style>
</head>
<body>
<div style="border:1px solid #1633bf;"> <a href="#">测试1</a> <a href="#">测试2</a> </div>
</body>
</html>
用ie8鼠标在“测试2”后面移动，居然会触发“测试1”的hover。
未知原因，未有解决方法。
ie的a元素的innerHTML的bug
比较两次alert的结果：
<!DOCTYPE html>
<html>
<body>
<a id="test1" href="http://www.cnblogs.com/">hello@163.net</a>
<a id="test2" href="http://www.cnblogs.com/">hello#163.net</a>
<script type="text/javascript">
alert(test1.innerHTML + "_" + test2.innerHTML);
test1.href = test2.href = "http://cloudgamer.cnblogs.com/";
alert(test1.innerHTML + "_" + test2.innerHTML);
</script>
</body>
</html>
有@的链接，内容变成href的内容，未知原因，解决方法是在修改的链接前面加上一个空格（即：" "+href）。
ie6的!important的bug
ie6运行下面代码：
<!DOCTYPE html>
<html>
<body>
<style>
#t{font-size:20px}
.t{ font-size: 12px !important; }
</style>
<div id="t" class="t">test</div>
</body>
</html>
可以看到是以12px显示的，可见!important能正常执行，再看下面代码：
<!DOCTYPE html>
<html>
<body>
<style>
.t{ font-size: 12px !important;font-size:20px}
</style>
<div class="t">test</div>
</body>
</html>
这里却以20px显示，说明!important在这里失效了，该bug常用来对ie6做hack，但要注意只能用在同一个{}内。
ie6的图片宽高问题
测试一下代码：
<style>
img{width:100px; height:100px;}
</style>
<img id="img" style="width:auto;height:auto;" />
<script>
img.onload = function(){
this.onload = null;
this.src = "http://www.baidu.com/img/lm.gif"
}
img.src = "http://www.baidu.com/img/baidu_logo.gif"
</script>
除了ie6在第二次载入时都能自动恢复尺寸。
ie6却在第一次载入时尺寸就定住不变了，未知解决方法。
ie8的table问题
运行以下代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<table border="1">
<thead>
<tr>
<td>test</td>
</tr>
</thead>
<tr id="t">
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
<br>
<input id="del" type="button" value="del">
<script>
document.getElementById("del").onclick =function(){
var t =document.getElementById("t")
t.parentNode.removeChild(t);
}
</script>
</body>
</html>
除了ie8，tr在remove后都能向上填充位置。
ie8却定在那里不动，解决方法是在移除后触发table的reflow，例如设置table的className。
ie6/7的clientTop的问题
运行以下代码：
<!DOCTYPE html>
<html>
<body>
<div id="test" style="border:10px solid #000">test</div>
<script>
var elem = document.getElementById("test")
elem.style.position = "absolute";
width = elem.clientTop;
elem.style.display = "none";
alert(elem.clientTop)
</script>
</body>
</html>
一般来说display为 "none"之后clientTop应该是0
但ie6 7却还会弹出10
本文转自博客园cloudgamer的博客，原文链接：web开发未解之谜，如需转载请自行联系原博主。