Javascript 两个固定位置的div，一个被推开，另一个被显示_Javascript_Html_Css_Internet Explorer_Css Position

Javascript 两个固定位置的div，一个被推开，另一个被显示

javascript html css internet-explorer

Javascript 两个固定位置的div，一个被推开，另一个被显示,javascript,html,css,internet-explorer,css-position,Javascript,Html,Css,Internet Explorer,Css Position,我用一个固定在网站底部的页脚为网站编程。我在mouseover事件上显示了一个div元素（#container），它也固定在页脚的正上方。在chrome中，当div显示时（display:none到display:inline），它可以完美地工作。在IE中，页脚每次都被向下推，我不知道为什么：'-（CSS看起来像这样： #footer { position: fixed !important; /*position: absolute;*/ height: 20px;

我用一个固定在网站底部的页脚为网站编程。我在mouseover事件上显示了一个div元素（#container），它也固定在页脚的正上方。在chrome中，当div显示时（display:none到display:inline），它可以完美地工作。在IE中，页脚每次都被向下推，我不知道为什么：'-（CSS看起来像这样：

#footer {
    position: fixed !important; 

    /*position: absolute;*/
    height: 20px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    background-color: #efefef;
    text-align: left;   
    z-index: 3;
}

 #container{
    position: fixed;
    height: 550px;
    bottom: 30px;
    right:0;
    width: 550px;
    z-index: 2;
    display: none;
    background: url(images/pau1_500g.png) no-repeat center center ;
    border: black 2px solid;
    background-color: rgb(255,255,255);
    background-size: 55%;
    z-index:2;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

第一行不再是这样的：

#footer {
    position: fixed !important; 

    /*position: absolute;*/
    height: 20px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    background-color: #efefef;
    text-align: left;   
    z-index: 3;
}

 #container{
    position: fixed;
    height: 550px;
    bottom: 30px;
    right:0;
    width: 550px;
    z-index: 2;
    display: none;
    background: url(images/pau1_500g.png) no-repeat center center ;
    border: black 2px solid;
    background-color: rgb(255,255,255);
    background-size: 55%;
    z-index:2;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

提前感谢，如果我需要提供更多代码/信息，请发表评论

编辑：编辑：带JS的HTML：

<!DOCTYPE html>
<html>
<head>
<title>*****</title>
<link href="myCSS.css" rel="stylesheet" type="text/css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript"> 
var req;
        var params;
        var posx;
        var posy;
        var testTime;
        var outTime;
    function realTest(id){
        params = "pauid="+id+"&nom=true&extreme=true";
        req = new XMLHttpRequest();
        req.open("get","azubi/highchartAJAX.php?"+params,true);
        req.send(null);
        req.onreadystatechange = evaluate;
    }

    function test(id){
            clearTimeout(testTime);
            testTime = setTimeout("realTest("+id+")",3000);
        }

    function evaluate(){
        if(req.readyState == 4 && req.status == 200){
            var se = document.createElement('script');
            se.type = "text/javascript";
            se.text = req.responseText;
            se.id = "testing";
            var toDel = document.getElementsByTagName("script");
            for(i = 0; i < toDel.length; i++){
                if(toDel[i].id=="testing"){
                    toDel[i].parentNode.removeChild(toDel[i]);
                }
            }
            document.body.appendChild(se);
        }
        var toShow = document.getElementById("container");
        toShow.style.display = "inline";
    }
</script> 
</head>
<body >
<div id="container"> </div>

<tr onmouseover='test($row[56])' onmouseout='out(this)'>
<div id="footer">
***
</div>
</body>
</html>


*****
var-req；
var参数；
var-posx；
var posy；
var测试时间；
var超时；
功能不动产（id）{
params=“pauid=“+id+”&nom=true&extreme=true”；
req=新的XMLHttpRequest（）；
打开（“get”、“azubi/highchartAJAX.php？”+params，true）；
请求发送（空）；
req.onreadystatechange=评估；
}
功能测试（id）{
clearTimeout（测试时间）；
testTime=setTimeout（“realTest”（+id+”），3000）；
}
函数求值（）{
如果（req.readyState==4&&req.status==200）{
var se=document.createElement（'script'）；
se.type=“text/javascript”；
se.text=req.responseText；
se.id=“测试”；
var toDel=document.getElementsByTagName（“脚本”）；
对于（i=0；i

您可以尝试此代码并在两个浏览器中签入，并且两个浏览器都显示相同的代码


*****
#页脚{
位置：固定！重要；
/*位置：绝对位置*/
高度：20px；
右：0；
底部：0；
左：0；
填充物：5px；
背景色：#EFEF；
文本对齐：左对齐；
z指数：3；
}
#容器{
位置：固定；
高度：550px；
底部：30px；
右：0；
宽度：550px；
z指数：2；
显示：无；
背景：url（images/pau1_500g.png）无重复中心；
边框：黑色2px实心；
背景色：rgb（255255）；
背景大小：55%；
z指数：2；
}
var-req；
var参数；
var-posx；
var posy；
var测试时间；
var超时；
功能不动产（id）{
params=“pauid=“+id+”&nom=true&extreme=true”；
req=新的XMLHttpRequest（）；
打开（“get”、“azubi/highchartAJAX.php？”+params，true）；
请求发送（空）；
req.onreadystatechange=评估；
}
功能测试（id）{
clearTimeout（测试时间）；
testTime=setTimeout（“realTest”（+id+”），3000）；
}
函数求值（）{
如果（req.readyState==4&&req.status==200）{
var se=document.createElement（'script'）；
se.type=“text/javascript”；
se.text=req.responseText；
se.id=“测试”；
var toDel=document.getElementsByTagName（“脚本”）；
对于（i=0；i

首先，谢谢大家

我做了两个简单的改变：

去掉元标记

给体元素属性高度：100%

太简单了！问题是水平滚动条推到了页脚的前面，因为…没人知道

特别感谢Chris

随机未关闭的

tr

标记有什么用？

tr

标记必须在一个表中，thead或tbody和closed我知道你的html是一个精简版本，但你似乎有一个浮动的tr，没有包含表，没有结束标记或任何td元素……而且你的脚本似乎在做http对我们无法访问的内容的请求（因为我们不知道它在哪台服务器上）。创建适当的页面精简版本（实际上，实际上是创建页面，而不仅仅是在复制和粘贴到此处时剪切位）这说明了您的问题，我们可以自己运行，您更有可能得到积极的响应。您也可以在精简时自己找到问题。@bloodscript:这正是您需要进行最小复制的原因。您的沙箱没有显示问题，所以现在您已将问题缩小到某个程度在原始页面中，而不是在新页面中。我的方法通常是在原始页面中，一次一个地删除我认为不相关的部分，刷新页面并每次重新测试。在某个时候，错误将停止发生，并且您知道您删除的最后一个块是一个促成因素。保留该部分，然后重新测试移动其他部分。迟早你会到达……的舞台（续）此外，Pete让我意识到你从来没有指定你在哪个版本的internet explorer上遇到问题。我假设IE11是目前唯一官方支持的版本。如果是IE的旧版本，那么你应该努力不支持它们。如果Microsoft不再支持IE的旧版本，那么你应该dn也不必。您的用户应该升级到受支持的版本，否则他们将面临潜在的安全风险等。如果您希望问题消失，您应该能够自己删除它。但不必为此感到尴尬。人们有问题，希望您能从中得到一些帮助在这里问。