XHTML弹出DIV层问题求助～～～

Question

如下代码在HTML4.0下面运行没有问题，但是在XHTML1.0下面运行就有问题。还请各位帮忙看看问题出在哪里了。谢谢：）<script language="JavaScript" type="text/javascript">
    window.onload = getMsg;
    window.onresize = resizeDiv;
    window.onerror = function() { }
    var divTop, divLeft, divWidth, divHeight, docHeight, docWidth, objTimer, i = 0;
    function getMsg() {
        try {
            divTop = parseInt(document.getElementById("eMeng").style.top, 10)
            divLeft = parseInt(document.getElementById("eMeng").style.left, 10)
            divHeight = parseInt(document.getElementById("eMeng").offsetHeight, 10)
            divWidth = parseInt(document.getElementById("eMeng").offsetWidth, 10)
            docWidth = document.body.clientWidth;
            docHeight = document.body.clientHeight;
            document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop, 10) + docHeight + 10; // divHeight
            document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft, 10) + docWidth - divWidth
            document.getElementById("eMeng").style.visibility = "visible"
            objTimer = window.setInterval("moveDiv()", 10)
        }
        catch (e) { }
    }    function resizeDiv() {
        i += 1
        if (i > 500) closeDiv()
        try {
            divHeight = parseInt(document.getElementById("eMeng").offsetHeight, 10)
            divWidth = parseInt(document.getElementById("eMeng").offsetWidth, 10)
            docWidth = document.body.clientWidth;
            docHeight = document.body.clientHeight;
            document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop, 10)
            document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft, 10)
        }
        catch (e) { }
    }    function moveDiv() {
        try {
            if (parseInt(document.getElementById("eMeng").style.top, 10) <= (docHeight - divHeight + parseInt(document.body.scrollTop, 10))) {
                window.clearInterval(objTimer)
                objTimer = window.setInterval("resizeDiv()", 1)
            }
            divTop = parseInt(document.getElementById("eMeng").style.top, 10)
            document.getElementById("eMeng").style.top = divTop - 1
        }
        catch (e) { }
    }
    
    function closeDiv() {
        document.getElementById('eMeng').style.visibility = 'hidden';
        if (objTimer) window.clearInterval(objTimer)
    } 
</script>
<div id="eMeng" style="border-right: #455690 1px solid; border-top: #a6b4cf 1px solid;
    z-index: 99999; left: 0px; visibility: hidden; border-left: #a6b4cf 1px solid;
    width: 180px; border-bottom: #455690 1px solid; position: absolute; top: 0px;
    height: 116px; background-color: #c9d3f3">
    <table style="border-top: #ffffff 1px solid; border-left: #ffffff 1px solid" cellspacing="0"
        cellpadding="0" width="100%" bgcolor="#cfdef4" border="0">
        <tbody>
            <tr>
                <td style="font-size: 12px; background-image: url(msgTopBg.gif); color: #0f2c8c"
                    width="30" height="24">
                </td>
                <td style="font-weight: normal; font-size: 12px; background-image: url(msgTopBg.gif);
                    color: #1f336b; padding-top: 4px; padding-left: 4px" valign="center" width="100%">
                    短消息提示：
                </td>
                <td style="padding-top: 2px; padding-right: 2px" valign="middle" align="right" width="19">
                    <span title="关闭" style="cursor: hand; color: red; font-size: 12px; font-weight: bold;
                        margin-right: 4px;" onclick="closeDiv()">×</span>
                </td>
            </tr>
            <tr>
                <td style="padding-right: 1px; background-image: url(1msgBottomBg.jpg); padding-bottom: 1px"
                    colspan="3" height="90">
                    <div style="border-right: #b9c9ef 1px solid; padding-right: 13px; border-top: #728eb8 1px solid;
                        padding-left: 13px; font-size: 12px; padding-bottom: 13px; border-left: #728eb8 1px solid;
                        width: 100%; color: #1f336b; padding-top: 18px; border-bottom: #b9c9ef 1px solid;
                        height: 100%">
                        您有
                        <asp:Label runat="server" ID="lblMsgCount" BorderColor="Red"></asp:Label>
                        条新短消息<br>
                        <br>
                        <div align="center" style="word-break: break-all">
                            <asp:HyperLink runat="server" ID="hlkMyReceiveURL" Target="_blank">点击查看信息</asp:HyperLink>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

你可以这样<!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>
<style type="text/css">
html,body{padding:0;margin:0}
</style>
</head>
<body><div id="eMeng" style="border-right: #455690 1px solid; border-top: #a6b4cf 1px solid;
    z-index: 99999; left: 600px; visibility: hidden; border-left: #a6b4cf 1px solid;
    width: 180px; border-bottom: #455690 1px solid; position: absolute; top: 0px;
    height: 116px; background-color: #c9d3f3;overflow:hidden">
    <table style="border-top: #ffffff 1px solid; border-left: #ffffff 1px solid" cellspacing="0"
        cellpadding="0" width="100%" bgcolor="#cfdef4" border="0">
        <tbody>
            <tr>
                <td style="font-size: 12px; background-image: url(msgTopBg.gif); color: #0f2c8c"
                    width="30" height="24">
                </td>
                <td style="font-weight: normal; font-size: 12px; background-image: url(msgTopBg.gif);
                    color: #1f336b; padding-top: 4px; padding-left: 4px" valign="center" width="100%">
                    短消息提示：
                </td>
                <td style="padding-top: 2px; padding-right: 2px" valign="middle" align="right" width="19">
                    <span title="关闭" style="cursor: hand; color: red; font-size: 12px; font-weight: bold;
                        margin-right: 4px;" onclick="closeDiv()">×</span>
                </td>
            </tr>
            <tr>
                <td style="padding-right: 1px; background-image: url(1msgBottomBg.jpg); padding-bottom: 1px"
                    colspan="3" height="90">
                    <div style="border-right: #b9c9ef 1px solid; padding-right: 13px; border-top: #728eb8 1px solid;
                        padding-left: 13px; font-size: 12px; padding-bottom: 13px; border-left: #728eb8 1px solid;
                        width: 100%; color: #1f336b; padding-top: 18px; border-bottom: #b9c9ef 1px solid;
                        height: 100%">
                        您有
                        <asp:Label runat="server" ID="lblMsgCount" BorderColor="Red"></asp:Label>
                        条新短消息<br>
                        <br>
                        <div align="center" style="word-break: break-all">
                            <asp:HyperLink runat="server" ID="hlkMyReceiveURL" Target="_blank">点击查看信息</asp:HyperLink>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script language="JavaScript" type="text/javascript">window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function() { }
var divTop, divLeft, divWidth, divHeight, docHeight, docWidth, objTimer, i = 0;
function getMsg() {
    try {        
       var t = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
       var l = document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft;
        divTop = parseInt(document.getElementById("eMeng").style.top, 10)
        divLeft = parseInt(document.getElementById("eMeng").style.left, 10)
        divHeight = parseInt(document.getElementById("eMeng").offsetHeight, 10)
        divWidth = parseInt(document.getElementById("eMeng").offsetWidth, 10)
        docWidth = document.documentElement?document.documentElement.clientWidth: document.body.clientWidth;
        docHeight = document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
        document.getElementById("eMeng").style.top = t + docHeight +"px"
        document.getElementById("eMeng").style.left = l + docWidth - divWidth+"px"
        document.getElementById("eMeng").style.visibility = "visible"
        objTimer = window.setInterval("moveDiv()", 20)
    }
    catch (e) { }
}function resizeDiv() {
    i += 1
    if (i > 500) closeDiv()
    try {
       var t = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop
       var l = document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft
        divHeight = parseInt(document.getElementById("eMeng").offsetHeight, 10)
        divWidth = parseInt(document.getElementById("eMeng").offsetWidth, 10)
        docWidth = document.documentElement?document.documentElement.clientWidth:document.body.clientWidth;
        docHeight = document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
        document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(t, 10)+"px"
        document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(l, 10)+"px"
    }
    catch (e) { }
}function moveDiv() {
    try {        
     var t = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop
     var l = document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft      if (parseInt(document.getElementById("eMeng").style.top, 10) <= (docHeight - divHeight + parseInt(t, 10))) {
          window.clearInterval(objTimer)
          objTimer = window.setInterval("resizeDiv()", 1)
      }
  divTop = parseInt(document.getElementById("eMeng").style.top, 10)
      document.getElementById("eMeng").style.top = divTop -1 +"px"
    }
    catch(e) {}
}function closeDiv() {
    document.getElementById('eMeng').style.visibility = 'hidden';
    if (objTimer) window.clearInterval(objTimer)
} 
</script>
<p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p>
<p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p>
<p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p>
</body>
</html>