web开发未解之谜

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_34186931

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量66

点赞数

文章标签： xhtml javascript ViewUI

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

weixin_34186931

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web开发未解之谜

ie7的li:hover问题 &lt;!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="z...
复制链接

扫一扫