在ie6中只能点击标题有文字的地方，为何？

hejie06 · 发表于 2008-4-25 13:30:13

<!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>
<script type="text/javascript">
function switchMenu(evt){
  var ele=evt.target||evt.srcElement; //分别针对非ie和ie，获取事件的源对象
  if(ele.tagName=="H2"){  //如果是<h2>
  var ulu=ele.parentNode.getElementsByTagName("ul");

do{
      ele=ele.nextSibling;  //反复取下一个兄弟节点，直到节点为<ul>或为null
    }while(ele&&ele.tagName!="UL");

/*   for(var i=0;i<ulu.length;i++)
   {
     if(ele==ulu[i]){continue;}
     ulu[i].style.display="none";
  }点击栏目后是否全部收起*/
    if(ele){
      var display=evt.target?getComputedStyle(ele,null).display:
        ele.currentStyle.display; //分别针对非ie和ie，获取<ul>的当前css属性display
      ele.style.display=display=="none"?"":"none"; //切换
    }
  }
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
margin:10px;
}
.content .sideLeft{
width:21%;
float:left;
margin-bottom:25px;
}
.content .main{
margin-left:22%;
width:77%;
margin-bottom:50px;
}
.nav{
background-color:#D9E6EF;
border:1px solid #9DB0BC;
padding-bottom:5px;
}
.nav h2{
display:block;
background-color:#5998C9;
margin:5px;
font-size:14px;
padding:5px;
color:#FFFFFF;
text-decoration:none;
border:1px solid #fff;
outline:none;
cursor:pointer;
background-image:url(../images/aw02.gif);
background-repeat:no-repeat;
background-position:97%;
}
.nav ul{
margin-left:0px;
list-style:none;
}
.nav ul li{
display:block;
margin:3px 5px 3px 5px;
background-color:#E6F2FA;
padding:3px 5px 3px 5px;
color:#4A89BA;
}
</style>
</head>

<body>
  <div class="content">
<div class="sideLeft">
<div onclick="switchMenu(event)" class="nav">
        <h2>这是第一行标题</h2>
        <ul>
          <li><a href="#" target="main">第一行子标题</a></li>
					<li><a href="#" target="main">第二行子标题</a></li>
        </ul>
				</div>
</div>
<div class="main">ddd</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

如题～～

[[i] 本帖最后由 hejie06 于 2008-4-25 13:46 编辑 ]

dansion · 发表于 2008-4-25 14:21:10

只有A标签才能点击。

.nav ul li{
display:block;
margin:3px 5px 3px 5px;
color:#4A89BA;
}
.nav ul li a{
display:block;
width:100%;
background-color:#E6F2FA;
padding:3px 5px 3px 5px;
}

hejie06 · 发表于 2008-4-25 14:31:08

<!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>
<script type="text/javascript">
function switchMenu(evt){
  var ele=evt.target||evt.srcElement; //分别针对非ie和ie，获取事件的源对象
  if(ele.tagName=="H2"){  //如果是<h2>
  var ulu=ele.parentNode.getElementsByTagName("ul");
    do{
      ele=ele.nextSibling;  //反复取下一个兄弟节点，直到节点为<ul>或为null
    }while(ele&&ele.tagName!="UL");
		
/*   for(var i=0;i<ulu.length;i++)
   {
     if(ele==ulu[i]){continue;}
     ulu[i].style.display="none";
  }点击栏目后是否全部收起*/
    if(ele){
      var display=evt.target?getComputedStyle(ele,null).display:
        ele.currentStyle.display; //分别针对非ie和ie，获取<ul>的当前css属性display
      ele.style.display=display=="none"?"":"none"; //切换
    }
  }
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
margin:10px;
}
.content .sideLeft{
margin-bottom:25px;
}

.content .main{
margin-left:22%;
width:77%;
margin-bottom:50px;
}
.nav{
background-color:#D9E6EF;
border:1px solid #9DB0BC;
padding-bottom:5px;
}
.nav h2{
display:block;
background-color:#5998C9;
margin:5px;
font-size:14px;
padding:5px;
color:#FFFFFF;
text-decoration:none;
border:1px solid #fff;
outline:none;
cursor:pointer;
background-image:url(../images/aw02.gif);
background-repeat:no-repeat;
background-position:97%;
}
.nav ul{
margin-left:0px;
list-style:none;
}
.nav ul li{
display:block;
margin:3px 5px 3px 5px;
background-color:#E6F2FA;
padding:3px 5px 3px 5px;
color:#4A89BA;
}
</style>
</head>
<body>
  <div class="content">
<div class="sideLeft">
<div onclick="switchMenu(event)" class="nav">
        <h2>这是第一行标题</h2>
        <ul>
          <li><a href="#" target="main">第一行子标题</a></li>
					<li><a href="#" target="main">第二行子标题</a></li>
        </ul>
				</div>
</div>
<div class="main">ddd</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

不会的吧，我用的是onclick触发呀。我把下面的定义去掉就可以点了。
.content .sideLeft{
width:21%;
float:left;
margin-bottom:25px;
}
初步判断应该是h2内可点击的宽度出了什么问题

dansion · 发表于 2008-4-25 14:47:02

给事件触发标签加上背景颜色测试一下。
一般不会有问题的。
注意给标签设定高度和宽度的CSS设定

hejie06 · 发表于 2008-4-25 14:54:15

谢谢楼上的，不过您可以没明白意思。
我的意思是点击h2这个标签，现在已经加了背景色，与背景色等肯定无关。
看了一些文章，估计是由于 layout 元素引起的，loayout浮动模型会有很多怪异的表现。
如果我给h2定义加一名zoom:1;可以解决点击问题，但是对h2外边距的定义又出问题了。

<!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>
<script type="text/javascript">
function switchMenu(evt){
  var ele=evt.target||evt.srcElement; //分别针对非ie和ie，获取事件的源对象
  if(ele.tagName=="H2"){  //如果是<h2>
  var ulu=ele.parentNode.getElementsByTagName("ul");
    do{
      ele=ele.nextSibling;  //反复取下一个兄弟节点，直到节点为<ul>或为null
    }while(ele&&ele.tagName!="UL");
		
/*   for(var i=0;i<ulu.length;i++)
   {
     if(ele==ulu[i]){continue;}
     ulu[i].style.display="none";
  }点击栏目后是否全部收起*/
    if(ele){
      var display=evt.target?getComputedStyle(ele,null).display:
        ele.currentStyle.display; //分别针对非ie和ie，获取<ul>的当前css属性display
      ele.style.display=display=="none"?"":"none"; //切换
    }
  }
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
margin:10px;
}
.content .sideLeft{
width:21%;
float:left;
margin-bottom:25px;
}
.content .main{
margin-left:22%;
width:77%;
margin-bottom:50px;
}
.nav{
background-color:#D9E6EF;
border:1px solid #9DB0BC;
padding-bottom:5px;
}
.nav h2{
display:block;
background-color:#5998C9;
margin:5px;
font-size:14px;
padding:5px;
color:#FFFFFF;
text-decoration:none;
border:1px solid #fff;
outline:none;
cursor:pointer;
background-image:url(../images/aw02.gif);
background-repeat:no-repeat;
background-position:97%;
zoom:1;
}
.nav ul{
margin-left:0px;
list-style:none;
}
.nav ul li{
display:block;
margin:3px 5px 3px 5px;
background-color:#E6F2FA;
padding:3px 5px 3px 5px;
color:#4A89BA;
}
</style>
</head>
<body>
  <div class="content">
<div class="sideLeft">
<div onclick="switchMenu(event)" class="nav">
        <h2>这是第一行标题</h2>
        <ul>
          <li><a href="#" target="main">第一行子标题</a></li>
					<li><a href="#" target="main">第二行子标题</a></li>
        </ul>
				</div>
</div>
<div class="main">ddd</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

而且更怪异的是，如果有多个h2，出错只对第一个h2。晕倒

<!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>
<script type="text/javascript">
function switchMenu(evt){
  var ele=evt.target||evt.srcElement; //分别针对非ie和ie，获取事件的源对象
  if(ele.tagName=="H2"){  //如果是<h2>
  var ulu=ele.parentNode.getElementsByTagName("ul");
    do{
      ele=ele.nextSibling;  //反复取下一个兄弟节点，直到节点为<ul>或为null
    }while(ele&&ele.tagName!="UL");
		
/*   for(var i=0;i<ulu.length;i++)
   {
     if(ele==ulu[i]){continue;}
     ulu[i].style.display="none";
  }点击栏目后是否全部收起*/
    if(ele){
      var display=evt.target?getComputedStyle(ele,null).display:
        ele.currentStyle.display; //分别针对非ie和ie，获取<ul>的当前css属性display
      ele.style.display=display=="none"?"":"none"; //切换
    }
  }
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
margin:10px;
}
.content .sideLeft{
width:21%;
float:left;
margin-bottom:25px;
}
.content .main{
margin-left:22%;
width:77%;
margin-bottom:50px;
}
.nav{
background-color:#D9E6EF;
border:1px solid #9DB0BC;
padding-bottom:5px;
}
.nav h2{
display:block;
background-color:#5998C9;
margin:5px;
font-size:14px;
padding:5px;
color:#FFFFFF;
text-decoration:none;
border:1px solid #fff;
outline:none;
cursor:pointer;
background-image:url(../images/aw02.gif);
background-repeat:no-repeat;
background-position:97%;
zoom:1;
}
.nav ul{
margin-left:0px;
list-style:none;
}
.nav ul li{
display:block;
margin:3px 5px 3px 5px;
background-color:#E6F2FA;
padding:3px 5px 3px 5px;
color:#4A89BA;
}
</style>
</head>
<body>
  <div class="content">
<div class="sideLeft">
<div onclick="switchMenu(event)" class="nav">
        <h2>这是第一行标题</h2>
        <ul>
          <li><a href="#" target="main">第一行子标题</a></li>
					<li><a href="#" target="main">第二行子标题</a></li>
        </ul>
<h2>这是第二行标题</h2>
        <ul>
          <li><a href="#" target="main">第二行子标题</a></li>
					<li><a href="#" target="main">第二行子标题</a></li>
        </ul>

</div>
</div>
<div class="main">ddd</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 hejie06 于 2008-4-25 14:59 编辑 ]

hejie06 · 发表于 2008-4-25 15:17:01

原因应该找到了，在On having layout一文中，英文原文在此：
http://www.satzansatz.de/cssd/onhavinglayout.htm

块级别的链接
hasLayout 会影响一个块级别链接的鼠标响应区域(可点击区域)。通常 hasLayout = false 时只有文字覆盖区域才能响应。而 hasLayout = true 则整个块状区域都可响应。添加了 onclick/onmouseover 等事件的任意块级元素也有同样的现象。

正在找处理办法，现在只想对ms说一句话，“该死的ie”～

帐号		自动登录	找回密码
密码			注册

[求助] 在ie6中只能点击标题有文字的地方，为何？