web开发未解之谜

最新推荐文章于 2025-08-12 22:08:46 发布

转载最新推荐文章于 2025-08-12 22:08:46 发布 · 553 阅读

文章标签：

#web开发 #ie #border #table #测试 #function

web相关专栏收录该内容

26 篇文章

订阅专栏

本文总结了IE浏览器从IE6到IE8的各种兼容性问题，包括li:hover失效、line-height失效、table布局异常等，并提供了部分问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*from：http://www.cnblogs.com/cloudgamer/archive/2008/07/27/1252308.html */

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透明背景问题

ff中正常，在ie中点击div中文字以外的部分会没反应。

如果有background-color就没问题，未知原因。

document.body.appendChild()导致IE已终止操作

以下代码会导致在ie出错“已终止操作”，ff中是没问题的：

但脚本如果不套在div里面又没问题，

未知原因，估计跟dom有关（网上说是跟body的加载顺序有关）。

解决方法是body加载完之后执行(ie特有的document.body.onload)，或用insertBefore代替，例如：

document.body.insertBefore(obj, document.body.childNodes[ 0 ]);

ie的table的td的宽度问题

转载请注明出处： http://www.cnblogs.com/cloudgamer/

以上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的结果：

有@的链接，内容变成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，但要注意只能用在同一个{}内。