web开发未解之谜
来源：互联网 发布：淘宝关于好评返现 编辑：程序博客网 时间：2024/04/28 03:59
ie7的li:hover问题
<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失效问题
<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高度设置问题
<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的正则问题
{
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代替，例如：
ie的table的td的宽度问题
Code以上3个table的结构是一样的其中都有一个td是100宽度只是内容不同，
在ff中3个table显示的效果是一样的，但用ie看会发现第一第二个table会无端多出一段空白
解决方法：给table添加样式table-layout:fixed;，未定义时，单元格宽度会按内容宽度的比例自动调整。
ie6/7的hr行距问题
<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的链接触发问题
<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的结果：
<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运行下面代码：
<html>
<body>
<style>
#t{font-size:20px}
.t{ font-size: 12px !important; }
</style>
<div id="t" class="t">test</div>
</body>
</html>
可以看到是以12px显示的，可见!important能正常执行，再看下面代码：
<html>
<body>
<style>
.t{ font-size: 12px !important;font-size:20px}
</style>
<div class="t">test</div>
</body>
</html>
这里却以20px显示，说明!important在这里失效了，该bug常用来对ie6做hack，但要注意只能用在同一个{}内。
- web开发未解之谜
- web开发未解之谜
- 未解之谜
- 未解之谜
- 未解之谜
- 未解之谜
- 一个未解之谜
- c++未解之谜
- cnki__未解之谜
- 关于推送未解之谜
- 基因组学的未解之谜
- 201 laravel 未解之谜
- Android千年未解之谜
- Java开发之文件上传 (未测试)
- 《西游记》中的未解之谜，经典之至
- 世界未解之谜之----------Android Gradle
- WEB开发之路
- WEB开发之唏嘘
- JavaScript 仿LightBox内容显示效果
- JavaScript 渐变效果
- Scalability Best Practices
- JavaScript blog式日历控件
- Javascript 读cookie
- web开发未解之谜
- JavaScript 图片切割效果
- 线程小例子
- 大型机学习之心路历程
- Oracle truncate table 与 delete tabel的区别
- JavaScript 图片滑动切换效果
- JavaScript 自定义多级联动浮动菜单
- JavaScript 多级联动select
- JavaScript 图片变换效果(ie only)
