高手，帮个忙，如何让下面的js代码在firefox和ie下显示都正常？

test.htm
<!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=utf-8" />
<title>日期控件测试</title>
<style type="text/css">
<!--
body{
font-size:12px;
margin:0;
}
.dlr_inputDate{                                                 /*日期框*/
width: 95px;
height: 22px;
line-height:22px;
padding:0px;
CURSOR: pointer;
margin: 0px;;
padding: 0px;
font-size: 12px;
border: 1px solid #A9CEF8;
background: url(pic/calendar.gif);
background-repeat: no-repeat;
background-position: right;
background-color: #F5FAFE;
}
-->
</style>
<script src="js/date.js" type="text/javascript"></script>
</head><body>
<br />
<br />
<br />
<br />
<br />
<br />
<table width="600" align="center">
  <tr>
    <td width="205">
<label><input name="dcstartdate" id="hdate1"  class="dlr_inputDate"  onclick="event.cancelBubble=true;showCalendar('hdate1',false,'hdate1')"></label>
</td>
    <td width="188">&nbsp;</td>
    <td width="191">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    test.htm
    <!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=utf-8" />
    <title>日期控件测试</title>
    <style type="text/css">
    <!--
    body{
    font-size:12px;
    margin:0;
    }
    .dlr_inputDate{                                                 /*日期框*/
    width: 95px;
    height: 22px;
    line-height:22px;
    padding:0px;
    CURSOR: pointer;
    margin: 0px;;
    padding: 0px;
    font-size: 12px;
    border: 1px solid #A9CEF8;
    background: url(pic/calendar.gif);
    background-repeat: no-repeat;
    background-position: right;
    background-color: #F5FAFE;
    }
    -->
    </style>
    <script src="js/date.js" type="text/javascript"></script>
    </head><body>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <table width="600" align="center">
      <tr>
        <td width="205">
    <label><input name="dcstartdate" id="hdate1"  class="dlr_inputDate"  onclick="event.cancelBubble=true;showCalendar('hdate1',false,'hdate1')"></label>
    </td>
        <td width="188">&nbsp;</td>
        <td width="191">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    date.js:
    document.write('<iframe id=CalFrame name=CalFrame frameborder=0 src="js/date.htm" style=display:none;position:absolute;z-index:100></iframe>');
    document.onclick=hideCalendar;function showCalendar(sImg,bOpenBound,sFld1,sFld2,sCallback)
    {
    var fld1,fld2;
    var cf=document.getElementById("CalFrame");
    var wcf=window.frames.CalFrame;
    var oImg=document.getElementById(sImg);
    if(!oImg){alert("控制对象不存在！");return;}
    if(!sFld1){alert("输入控件未指定！");return;}
    fld1=document.getElementById(sFld1);
    if(!fld1){alert("输入控件不存在！");return;}
    if(fld1.tagName!="INPUT"||fld1.type!="text"){alert("输入控件类型错误！");return;}
    if(sFld2)
    {
    fld2=document.getElementById(sFld2);
    if(!fld2){alert("参考控件不存在！");return;}
    if(fld2.tagName!="INPUT"||fld2.type!="text"){alert("参考控件类型错误！");return;}
    }
    if(!wcf.bCalLoaded){alert("日历未成功装载！请刷新页面！");return;}
    if(cf.style.display=="block"){cf.style.display="none";return;}

    var eT=0,eL=0,p=oImg;
    var sT=document.body.scrollTop,sL=document.body.scrollLeft;
    var eH=oImg.height+25,eW=oImg.width;
    while(p&&p.tagName!="BODY"){eT+=p.offsetTop;eL+=p.offsetLeft;p=p.offsetParent;}
    cf.style.top=(document.body.clientHeight-(eT-sT)-eH>=cf.height)?eT+eH:eT-cf.height;
    cf.style.left=(document.body.clientWidth-(eL-sL)>=cf.width)?eL:eL+eW-cf.width;
    cf.style.display="block";

    wcf.openbound=bOpenBound;
    wcf.fld1=fld1;
    wcf.fld2=fld2;
    wcf.callback=sCallback;
    wcf.initCalendar();
    fld = fld1
    }
    function hideCalendar()
    {
    var cf=document.getElementById("CalFrame");
    cf.style.display="none";
    }
      

  3.   

    date.htm:
    <HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <STYLE type=text/css>TD {
    FONT-SIZE: 12px; FONT-FAMILY: arial; TEXT-ALIGN: center
    }
    TD.dt {
    FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: arial; TEXT-ALIGN: center
    }
    A {
    COLOR: blue
    }
    A:hover {
    COLOR: red
    }
    A.bt {
    COLOR: blue
    }
    </STYLE><SCRIPT language=javascript>
    <!--//
    var str='',i,j,yy,mm,openbound,callback;
    var fld1,fld2;
    var wp=window.parent;
    var cf=wp.document.getElementById("CalFrame");
    var fld,curday,today=new Date();
    today.setHours(0);today.setMinutes(0);today.setSeconds(0);today.setMilliseconds(0);
    //var lastyear=today.getYear(),lastmonth=today.getMonth();
    function parseDate(s)
    {
    var reg=new RegExp("[^0-9-]","")
    if(s.search(reg)>=0)return today;
    var ss=s.split("-");
    if(ss.length!=3)return today;
    if(isNaN(ss[0])||isNaN(ss[1])||isNaN(ss[2]))return today;
    return new Date(parseInt(ss[0]),parseInt(ss[1]*1)-1,parseInt(ss[2]*1));
    }
    function resizeCalendar(){cf.width=144;cf.height=192;}
    function initCalendar()
    {
    if(fld1&&fld1.value.length>0){curday=parseDate(fld1.value);}
    else if(fld2&&fld2.value.length>0){curday=parseDate(fld2.value);}
    else curday=today;
    drawCalendar(curday.getFullYear(),curday.getMonth());
    }
    function drawCalendar(y,m)
    {
    var x=new Date(y,m,1),mv=x.getDay(),d=x.getDate(),de;
    yy=x.getFullYear();mm=x.getMonth();
    document.getElementById("yyyymm").innerHTML=yy+"."+(mm+1>9?mm+1:"0"+(mm+1));
    for(var i=1;i<=mv;i++)
    {
    de=document.getElementById("d"+i);
    de.innerHTML="";
    de.bgColor="";
    }
    while(x.getMonth()==mm)
    {
    de=document.getElementById("d"+(d+mv));
    if(x.getTime()==curday.getTime())
    de.bgColor="#dddddd";
    else
    de.bgColor="white";
    if(x.getTime()==today.getTime())
    de.innerHTML="<a href=javascript:setDate("+d+");><font color=red>"+d+"</font></a>";
    else if(x.getTime()<today.getTime())
    if(openbound){de.innerHTML="<a href=javascript:setDate("+d+"); class=bt>"+d+"</a>";}
    else{de.innerHTML="<font color=#888888>"+d+"</font>";}
    else
    de.innerHTML="<a href=javascript:setDate("+d+");>"+d+"</a>";
    x.setDate(++d);
    }
    while(d+mv<=42)
    {
    de=document.getElementById("d"+(d+mv));
    de.innerHTML="";
    de.bgColor="";
    d++;
    }
    }
    function setDate(d)
    {
    var dstr=yy+"-"+appendZero((mm+1))+"-"+appendZero(d);
    if(callback&&callback.length>0){eval("wp."+callback+"(\""+dstr+"\")");}
    else{fld1.value=dstr;}
    wp.hideCalendar();
    }
    function setToDay(){
      var sToDay = new Date()
      sy = sToDay.getFullYear()
      sm = parseInt(sToDay.getMonth(),10) + 1
      sd = sToDay.getDate()
      //if (!fld1){parent.document.getElementById().value=sy +"-"+ appendZero(sm) +"-" + appendZero(sd)}
      //else{fld1.value = sy +"-"+ appendZero(sm) +"-" + appendZero(sd)}
      fld1.value = sy +"-"+ appendZero(sm) +"-" + appendZero(sd)
      wp.hideCalendar();
    }function appendZero(s){
      if (s.toString().length == 1){
         return "0"+s
      }
      else{
         return s
      }
    }
    //-->
    </SCRIPT><META content="MSHTML 6.00.2800.1479" name=GENERATOR></HEAD>
    <BODY bottomMargin=0 bgColor=red leftMargin=0 topMargin=0 
    onload=resizeCalendar(); rightMargin=0>
    <TABLE id=tbl0 cellSpacing=0 cellPadding=1 bgColor=#336699 border=0>
      <TBODY>
      <TR>
        <TD>
          <TABLE cellSpacing=1 cellPadding=2 width="100%" bgColor=white border=0>
            <TBODY>
            <TR bgColor=gray>
              <TD id=prev width=16 bgColor=#333399><A 
                href="javascript:drawCalendar(yy,mm-1);"><!--IMG border=0 height=16 
                src="calendar.files/prev.gif" width=16--><FONT 
                color=#ffffff>&lt;&lt;</FONT></A>&nbsp;</TD>
              <TD id=yyyymm style="FONT-SIZE: 11px; COLOR: white" width="99%" 
              bgColor=#333399></TD>
              <TD id=next style="FONT-SIZE: 11px; COLOR: white" width=16 
              bgColor=#333399><A href="javascript:drawCalendar(yy,mm+1);"><!--IMG border=0 height=16 
                src="calendar.files/next.gif" width=16-->&nbsp;<FONT 
                color=#ffffff>&gt;&gt;</FONT> </A></TD></TR></TBODY></TABLE>
          <TABLE cellSpacing=2 cellPadding=0 width=142 bgColor=#e0e0e0 border=0>
            <TBODY>
            <TR height=18>
              <TD width=18><FONT color=red>日</FONT></TD>
              <TD width=18>一</TD>
              <TD width=18>二</TD>
              <TD width=18>三</TD>
              <TD width=18>四</TD>
              <TD width=18>五</TD>
              <TD width=18><FONT color=green>六</FONT></TD></TR>
            <TR height=1>
              <TD bgColor=gray colSpan=7></TD></TR><!-- add new row by gm-->
            <TR>
              <TD colSpan=7>
                <TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#ffffff 
                border=0>
                  <TBODY>
                  <TR>
                    <TD height=11></TD></TR>
                  <SCRIPT language=javascript>
    <!--//
    for(i=0;i<6;i++)
    {
    str+="<tr height=18>";
    for(j=1;j<=7;j++)str+="<td id=d"+(i*7+j)+" class=dt></td>";
    str+="</tr>";
    }
    document.write(str);
    //-->
    </SCRIPT>
                  </TBODY></TABLE></TD></TR><!-- add new row by gm-->
            <TR height=1>
              <TD bgColor=gray colSpan=7></TD></TR>
            <TR height=18>
              <TD colSpan=7><A 
                href="javascript:setToDay()">今天</A>&nbsp;&nbsp;&nbsp;&nbsp;<A 
                href="javascript:wp.hideCalendar();">关闭</FONT></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
    <SCRIPT language=javascript>
    <!--//
    var bCalLoaded=true;
    //-->
    </SCRIPT>
    </BODY></HTML>