Question

我编写了一个带有页脚的网站，该网站固定在网站的底部。我在鼠标悬停事件上显示一个div元素（#container），该事件也是固定的，位于页脚正上方。在chrome中，当div显示时，它可以很好地工作（显示：无显示：内联）。在IE浏览器中，页脚会在每个单一时间被推下来，我不明白为什么：＆＃39 ;-（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;
}

第一行NO LONGER看起来像这样：

<!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>

Answer 1

您可以尝试使用此代码并检入两种浏览器，并且两者都显示相同的内容，

<!DOCTYPE html>
<html>
<head>
<title>*****</title>
<style>
#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;
}
</style>
<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"> 
sdfdsf
</div>
<table style="height:50%">
<tr onmouseover='test(56)'>
<td>
sdfsdfsdf
</td>
</tr>
</table>
<div id="footer">
***
</div>
</body>
</html>

我没有对现有代码进行任何更改，似乎正在正确显示

Answer 2

首先谢谢大家！

我做了两件简单的改动：

摆脱元标记
赋予body元素属性高度：100％;

太容易了！问题是水平滚动条在页脚前推，因为...没人知道。

特别感谢Chris

2具有固定位置的Div，当另一个显示时，一个被推开

2 个答案: