求助:W3C标准 导致俺JS代码失效

以下代码实现的是在表格中用鼠标拖拽单元格拖拽区域改变2边单元格宽度的功能，，此代码在FIREFOX中正常，但在IE6中如果使用第一行( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> )以后便不能拖拽,删除此行便又可以，因为脚本要跨多IE版本使用，望高手帮忙找找原因，我找了半天也没看出来哪个JS函数不符合3C标准感激不尽 
<!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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="author" content="ShiJundao" />
<meta name="Copyright" content="ShiJundao" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>xxxx</title>
<style>
body{
margin:0;
font:normal 12px/150% "宋体",Arial;
color:#000;
}/*Drag Menu*/
.bg { 
font-size:12px; 
color:#000000; 
table-layout:fixed;
}
.dragresizediv{ 
text-align:center; 
width:17px;
height:125px;
margin:0px 0 0px 0; 
background:#fff; 
border:0px; 
float:left; 
cursor:e-resize;
}
.closeopenmenu{ 
text-align:center; 
width:17px;
height:35px!important;
height:50px;
margin:0px 0 0px 0; 
background:#fff; 
border:0px; 
float:left; 
cursor:hand;
padding-top:15px;
} 
</style></head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="60">&nbsp;</td>
  </tr>
</table>
<table width="1024" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" class="bg" id="theObjTable" >
  <tr>
    <td width="200" height="100%" id="menulist-l">&nbsp;</td>
    <td width="17" height="100%" align="center" valign="middle"><span class="dragresizediv" id="dragarea-a">&nbsp;</span><span class="closeopenmenu" id="showhidearea"><img src="images/arrowhead_close.gif" name="showhidepic" id="showhidepic" /></span><span class="dragresizediv" id="dragarea-u">&nbsp;</span></td>
    <td height="100%">&nbsp;</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="25">&nbsp;</td>
  </tr>
</table>
<div id="out"></div>
<script language="javascript" type="text/javascript">
<!--
var $D = document;
function $I(e){return $D.getElementById(e);};

    window.onload = function() {
        drag($I("dragarea-a"));
drag($I("dragarea-u"));
    };

    function drag(o,r) {
        o.p_p_c_gw = function(index)
        {
            if (window.ActiveXObject) {
                return o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth;
            } else {
                return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth) - parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding) * 2 - 2;
            }
        }        o.p_p_p_sw = function(index, w)
        {
            for (var i = 0; i < o.parentNode.parentNode.parentNode.parentNode.rows.length; i++) {
                o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width = w+"px";
            }
        }

var out = $I("out");
/* o.firstChild.onmousedown = function(){return false;}; */        o.onmousedown = function(a) {
            
            if (!a) a = window.event;
            var lastX = a.clientX;
            var watch_dog = o.p_p_c_gw(-1) + o.p_p_c_gw(1);             if (o.setCapture) o.setCapture();
            else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            //
   
            $D.onmousemove = function(a) {
                if (!a) a = window.event;
    if(o.p_p_c_gw(-1)+o.p_p_c_gw(1)>watch_dog){ 
     o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(-1)); 
     return; 
    }
         var t = a.clientX - lastX;
 out.innerHTML = t;
         if (t > 0) { //right 
          if (parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + 1].style.width) - t < 10) return;
　　　　　 if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex - 1].style.width) + t > 200){
　　　　　　    o.parentNode.parentNode.cells[o.parentNode.cellIndex - 1].style.width = "200px";
　　　　　　    return;
}
                    o.p_p_p_sw(o.parentNode.cellIndex - 1, o.p_p_c_gw(-1) + t);
                    o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t);
                } else { //left 
                    if (parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex - 1].style.width) + t < 10) return;
                    o.p_p_p_sw(o.parentNode.cellIndex - 1, o.p_p_c_gw(-1) + t);
                    o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t);
                }
                lastX = a.clientX;
            };
            $D.onmouseup = function() {
                if (o.releaseCapture) o.releaseCapture();
                else if (window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                $D.onmousemove = null;
                $D.onmouseup = null;
            };
        };
    }

function ShowHideMenu(){
if($I("menulist-l").style.display == ""){
$I("menulist-l").style.display = "none";
$I("dragarea-a").style.cursor = "not-allowed";
$I("dragarea-u").style.cursor = "not-allowed";
$I("dragarea-a").onmousedown = function(){return false;};
$I("dragarea-u").onmousedown = function(){return false;};
$I('showhidepic').src = "images/arrowhead_open.gif";
}
else{
$I("menulist-l").style.display = "";
$I("dragarea-a").style.cursor = "e-resize";
$I("dragarea-u").style.cursor = "e-resize";
drag($I("dragarea-a"));
drag($I("dragarea-u"));
$I('showhidepic').src = "images/arrowhead_close.gif";
}
}

$I("showhidearea").ondblclick = ShowHideMenu;
    // -->
</script></body>
</html>

解决方案 »

  1.   

    只要去掉.closeopenmenu里的cursor:hand;就可以通过W3C验证了,不过问题依旧问题可能出在IE对标准的支持上
      

  2.   

    IE6的确很多地方时不符合为w3c标准的，没办法
      

  3.   

    不清楚.标准是怎样的.没看到哪里不符合了,这种东西还是用IDE比较清楚.比如INTELLIJ IDEA就有.还有1ST javascript这个工具比较小,下载用用,可以检查的
      

  4.   

    有解决方法么 各位，，，你们可以复制到html文件里试试的
      

  5.   

    本帖最后由 net_lover 于 2010-04-01 13:21:03 编辑
      

  6.   

    你的数据你可以看到已经在变化了，所以是table-layout:fixed;导致表格不能改变宽度了
      

  7.   

    去掉table-layout:fixed;以后 拖拽的时候在IE6中 会有滑动的感觉，拖拽不准，，不去掉table-layout:fixed;去掉首行“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ”就能比较准确的拖拽了郁闷   
      

  8.   

    cursor:hand;
    to
    cursor:pointer;
      

  9.   

    我这个是让它在规定宽度 向左拖拽的，，超过200像素我让它不能向右拖动，，可是去掉table-layout:fixed;以后向左拖动 拖动区域移动的比鼠标指针的速度快导致滑动了郁闷，，，不会必须去掉 第一行( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> )吧，欲哭无泪。高手你在哪里~~~
      

  10.   

    恭喜啊，来晚了，不要用fixed这样不好调试，用相对定位比较好
      

  11.   

    通过IE6、7、8及FF测试，拖拽基本相同！没有出现滑动现象！
    <!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>
    <title>xxxx</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="author" content="ShiJundao" />
    <meta name="Copyright" content="ShiJundao" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style type="text/css">
    body{margin:0;font:normal 12px/1.5 Arial;color:#000;}
    table,tr,td{border-collapse:collapse;border:1px solid #ccc;}
    /*Drag Menu*/
    .bg{color:#000;width:99%;margin:60px auto 35px auto;}
    .dragresizediv,.closeopenmenu{text-align:center;width:17px;margin:0;background:#fff;border:0;float:left;}
    .dragresizediv{height:125px;cursor:e-resize;}
    .closeopenmenu{height:35px;cursor:pointer;padding-top:15px;}
    </style>
    <script language="javascript" type="text/javascript">
    var $D = document;
    function $I(e){return $D.getElementById(e);};
    window.onload = function(){
    drag($I("dragarea-a"));
    drag($I("dragarea-u"));
    };
    function drag(o){
    o.p_p_c_gw = function(index){
    if (window.ActiveXObject){
    return o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth;
    } else {
    return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth) - 1;
    }
    }
    o.p_p_p_sw = function(index, w){
    for (var i = 0; i < o.parentNode.parentNode.parentNode.parentNode.rows.length; i++){
    o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width = w + "px";
    }
    }
    var out = $I("out");
    /* o.firstChild.onmousedown = function(){return false;}; */
    o.onmousedown = function(a) {
    if (!a) a = window.event;
    var lastX = a.clientX;
    var watch_dog = o.p_p_c_gw(-1) + o.p_p_c_gw(1);
    if (o.setCapture) o.setCapture();
    else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    $D.onmousemove = function(a){
    if (!a) a = window.event;
    if(o.p_p_c_gw(-1)+o.p_p_c_gw(1)>watch_dog){
    o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(-1));
    return;
    }
    var t = a.clientX - lastX;
    out.innerHTML = t;
    if (t > 0) { //right
    if (parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + 1].style.width) - t < 10) return;
    if (parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex - 1].style.width) + t > 200){
    o.parentNode.parentNode.cells[o.parentNode.cellIndex - 1].style.width = "200px";
    return;
    }
    o.p_p_p_sw(o.parentNode.cellIndex - 1, o.p_p_c_gw(-1) + t);
    o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t);
    }else{ //left
    if (parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex - 1].style.width) + t < 10) return;
    o.p_p_p_sw(o.parentNode.cellIndex - 1, o.p_p_c_gw(-1) + t);
    o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t);
    }
    lastX = a.clientX;
    };
    $D.onmouseup = function(){
    if (o.releaseCapture) o.releaseCapture();
    else if (window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    $D.onmousemove = null;
    $D.onmouseup = null;
    };
    };
    }function ShowHideMenu(){
    if($I("menulist-l").style.display == ""){
    $I("menulist-l").style.display = "none";
    $I("dragarea-a").style.cursor = "not-allowed";
    $I("dragarea-u").style.cursor = "not-allowed";
    $I("dragarea-a").onmousedown = function(){return false;};
    $I("dragarea-u").onmousedown = function(){return false;};
    //$I('showhidepic').src = "arrowhead_open.gif";
    }else{
    $I("menulist-l").style.display = "";
    $I("dragarea-a").style.cursor = "e-resize";
    $I("dragarea-u").style.cursor = "e-resize";
    drag($I("dragarea-a"));
    drag($I("dragarea-u"));
    //$I('showhidepic').src = "arrowhead_close.gif";
    }
    }
    </script>
    </head>
    <body>
    <table cellpadding="0" class="bg" id="theObjTable">
    <tr>
    <td width="200" height="100%" id="menulist-l">左</td>
    <td width="17" height="100%" valign="middle">
    <span class="dragresizediv" id="dragarea-a">&nbsp;</span>
    <span class="closeopenmenu" ondblclick="ShowHideMenu();">中</span>
    <span class="dragresizediv" id="dragarea-u">&nbsp;</span>
    </td>
    <td height="100%">右</td>
    </tr>
    </table>
    <div id="out"></div>
    </body>
    </html>
      

  12.   

    mc008 大侠加的这句
    table,tr,td{border-collapse:collapse;border:1px solid #ccc;}
    的确有效， 表格边框合并以后就没这问题了
    function drag(o){
        o.p_p_c_gw = function(index){
            if (window.ActiveXObject){
                return o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth;
            } else {
                return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth) - 1;
            }
    看来是W3C标准使得在IE下 用原来的JS代码获取的表格单元格列宽不正确导致，受益匪浅，感谢 mc008 大力相助！ 祝 mc008 兄 天福永享，寿比天齐~