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

 

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  阅读(13579)  评论(22)  编辑  收藏  举报