web开发未解之谜

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>
<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

 

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

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

 

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

 

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

Code

 

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

未知原因,估计跟dom有关(网上说是跟body的加载顺序有关)。

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

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



ie的table的td的宽度问题

Code

以上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

 

 

posted @ 2008-07-27 03:31 cloudgamer 阅读(...) 评论(...) 编辑 收藏