如何解决js触发导致的div相对定位的不定性有源码有附件 - JavaScript论坛

zmhdxy

等　级：新手上路
帖　子：452
专家分：0
注　册：2007-9-27

楼主

问题点数：0 回复次数：2

如何解决js触发导致的div相对定位的不定性有源码有附件

里面的红色部分左右的位置没有错误
上下的位置触发后就改变了有三处有这样的问题
只要解决一个就行了
触发后显示的内容是不定的如果定的话就好办了
望会的人指教提示

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. xml:lang="gb2312">
<head>
<title>我的music</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<style type="text/css">
#body{
    text-align:center;
    font-size:12px;
    line-height:150%;/* 行高,百分比取值是基于字体的高度尺寸*/
    background-color:#CADEFF;
    color:#999;
    padding:0px;/*对象四边的补丁边距*/
    margin:0px;
    height:100%;
     font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; 

}
#body div{
    word-wrap: break-word;/*内容将在边界内换行。如果需要，词内换行（word-break）也行发生*/
    word-break:break-all;/*字内换行,也允许非亚洲语言文本行的任意字内断开*/
}
a:link{
    color:#0707A9;
    text-decoration:none;
}
a:visited{
    color:#0707A9;
    text-decoration:none;
}
a:hover{
    color:#EE0000;
    text-decoration:none;
}

#center{
    text-align:center;
    margin:0px;/*上下  左右*/
    width:800px !important;
    width /**/:800px;
    padding:5px 10px 0px 10px;/*上 右 下 左*/
    border-left:1px solid #999;
    border-right:1px solid #999;
    background-color:#f3f3f3;
    color:#000000;
    clear:both;/*不允许有浮动对象*/
}
#centerlist{
    background-color:#FFFFFF;
    width:800px !important;
    width :800px;
}

#right{
    float:right;
    padding:5px 5px 7px 5px;
    width:595px !important;
    width /**/:600px;
    background-color:#fff;
    border-left:3px solid #eee;
    clear:right;/*不允许右边有浮动对象*/
}
#rightlist{
    background-color:#ADD8E6;
    z-index:0;
    width:590;
    }
#lyrics{
    text-align:left;
    background-color:#ADD8E6;
    z-index:0;
    width:590;
    }
#geming{
        position:relative; 
        width:220px; 
        height:17px; 
        z-index:1; 
        left: -200px; 
        top: -100px; 
        visibility: inherit; 
        overflow: visible;
        color:"#00FF00";
        font-size:15px;
        background-color:#FF0000;
}
#liuran{
        position:relative; 
        height:37px; 
        z-index:1; 
        left: 20px; 
        top: -60px;
        width:300px;
        
}
#nomusic{
        position:relative; 
        width:43px; 
        height:14px; 
        z-index:5; 
        left:195px; 
        top: -95px;
        font-size:12px;
        color:#000000;
        font-family:"宋体";
        z-index:1;
}
INPUT {
     HEIGHT: 21px;
     font-size: 12px;
     width: 190px;
}
    
</style>
<script language="javascript" type="text/javascript">
<!--    
function $(id)
{
    return document.getElementById(id);    
}

function show(obj)
{
    var s=$(obj).style;
    s.display=s.display=="none" ? "" : "none";
}
function hideContextmenu()
        {
            window.event.returnValue=false;
        }
-->
</script>
</head>
<body id="body" oncontextmenu="hideContextmenu()" oncopy="return false;" oncut="return false;">
<div id="center">    
    <div id="centerlist">
      <div id="right">
        <div id="rightlist">
  <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="594" height="80">
    <param name="AutoSize" value="0">
    <param name="AutoStart" value="1">
    <param name="AutoRewind" value="0">
    <param name="BufferingTime" value="5">
    <param name="CaptioningID" value>
    <param name="ClickToPlay" value="0">
    <param name="DisplayBackColor" value="0">
    <param name="DisplayForeColor" value="16777215">
    <param name="DisplayMode" value="0">
    <param name="DisplaySize" value="2">
    <param name="EnableContextMenu" value="-1">
    <param name="EnablePositionControls" value="-1">
    <param name="EnableFullScreenControls" value="-1">
    <param name="EnableTracker" value="-1">
    <param name="Filename" value="<%=lujin%>">
    <param name="InvokeURLs" value="-1">
    <param name="Language" value="-1">
    <param name="Mute" value="0">
    <param name="SendPlayStateChangeEvents" value="-1">
    <param name="ShowCaptioning" value="0">
    <param name="ShowControls" value="-1">
    <param name="ShowAudioControls" value="-1">
    <param name="ShowDisplay" value="0">
    <param name="ShowGotoBar" value="0">
    <param name="VideoBorder3D" value="0">
    <param name="Volume" value="-600">
    <param name="WindowlessVideo" value="0">
  </object></div>
  <div id="lyrics" onclick="show('gechi')">
    歌词介绍(点击)
  </div>
        <div id="gechi" style="display:none">
        <br />
        这是点击了----歌词介绍---- 后显示的内容<br />
        <br />
        <br />&nbsp;  &nbsp; &nbsp; 这里内容的高度是不定的
        </div>
</div>
<div id="geming" style="color:#00FF00;text-align:left;"><%=E%><%=F%></div>
<div id="liuran" >  
  <input name="pp" type="file" onChange='window.location.href = "index.asp?pp="+<%=Server.URLEncode("value")%>'>
</div>
<div id="nomusic">静音</div>            
                
    </div>
</div>
<div id="foot">
  <div id="footinfo">
        COPYRIGHT &copy; suiye 2008 <a href="mailto: <br />
        <br />
  </div>
</div>
</body>
</html>