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透明背景问题
Code <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中是没问题的：
Code <!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的宽度问题
Code <!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的bugie6运行下面代码：
<! 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
转载于:https://www.cnblogs.com/cloudgamer/archive/2008/07/27/1252308.html
相关资源：数据结构—成绩单生成器