在Internet Explorer中的定位？

StackOverflow https://stackoverflow.com/questions/2151577

  •  23-09-2019
  •  | 
  •  

题

我只是写了一个样本页面角落的横幅和工具提示。一切都与Firefox的工作就好了。但在IE浏览器的东西都无法正常工作。我上网习惯，发现IE不支持位置：固定的点击 所以没有人知道如何解决这个问题呢？结果 这是我的源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>

    <style type="text/css">
 .tooltip {
    width: 200px;
    position: fixed;
    top:auto;
    bottom:70px;
    right:70px;
    left:auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: xx-small;
}
#cornerbanner {
    position: fixed;
    top:auto;
    left:auto;
    right:0px;
    bottom:0px;
}
    .tooltip .tooltip_top {
    background-image: url(images/Box_BG_01.png);
    height: 34px;
    background-repeat: no-repeat;
    background-position: center top;
    line-height: 45px;
    text-align: right;
    padding-right: 30px;
    vertical-align: text-bottom;
    font-size: xx-small;
    font-weight: normal;
    overflow: hidden;
}
body {
    background-color: #F90;
}
.content p {
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
    font-size: x-small;
    text-align: justify;
    padding: 15px;
    border: 1px solid #FFF;
}
.tooltip .tooltip_top a {
    text-decoration: none;
    color: #333;
}
    .tooltip .tooltip_con {
    background-image: url(images/Box_BG_03.png);
    background-repeat: repeat-y;
    padding-right: 20px;
    padding-left: 20px;
    display: block;
    clear: both;
    text-align: justify;
    letter-spacing: normal;
}
.content {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
    .tooltip .tooltip_bot {
    background-image: url(images/Box_BG_05.png);
    height: 24px;
    background-repeat: no-repeat;
    background-position: center bottom;
}
    .tooltip .tooltip_con #tooltip_link {
    text-align: right;
    color: #666;
    text-decoration: none;
    margin-top: 10px;
}
    .tooltip .tooltip_con #tooltip_link a {
    color: #666;
    text-decoration: none;
}
    .tooltip .tooltip_con img {
    float: right;
    margin-right: 5px;
    margin-left: 5px;
}
    </style>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $(".tooltip").fadeOut(0);
          $("#cornerbanner").mouseover(function(){
          $(".tooltip").fadeIn("slow")
          });
          $("#close_tooltip").click(function(){
          $(".tooltip").fadeOut();
          });
        });

    </script>
    </head> 
<body>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel ligula
        leo, ac aliquet ante. Sed ut elit et purus ultricies ornare. Sed eu justo sem.
        Suspendisse convallis elementum eros, vitae consequat lorem sollicitudin vitae.
        Phasellus bibendum, libero ac semper lobortis, orci tellus lacinia nisl, eget
        luctus risus felis sed dolor. Phasellus commodo imperdiet neque vitae elementum.
        Ut iaculis vestibulum velit cursus blandit. Cras ornare iaculis velit, vitae
        malesuada mi mattis tempor. Ut consequat dapibus massa eget scelerisque. Quisque
        sed suscipit sapien. Duis metus urna, consequat tempor feugiat sit amet, placerat
        non lorem. Integer eget urna elit, et ullamcorper libero. In iaculis aliquet</p>
            <div id="tooltip_link"><a href="http://www.google.com">Click here</a></div>
            </div>
            <div class="tooltip_bot"></div>
    </div>
</body>
</html>
有帮助吗？

解决方案

问题是，最受欢迎最常用的浏览器 - 互联网浏览器的Windows - 不理解它，而不是恢复到position: absolute;这将是聊胜于无，它会恢复到position: static;作为指定由CSS标准。这与具有完全没有position相同的效果。需要注意的是IE 7选自β-2向上确实支持position: fixed;（如果使用文档类型声明触发严格模式），所以我将从此修复排除IE 7。

其他提示

你的意思是“不工作在IE6”？下面的固定位置的CSS工作正常，我锚页脚在IE7和IE8的网页的底部：

 Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }

position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
right: expression(0+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');

这会漂浮在非常右上角的元件。如果你想别处定位它，在expression(0+(为任一值改变0

的Internet Explorer 6理解position:absolute，其是用于该工作的良好基础。 absolute和fixed positioning之间的相似性在于它从正常内容的流中移除。所以，那么你使用top和right positionings通常，使用javascript中就有一点点。我不知道如何读的JavaScript。但谁在乎。它的工作原理;）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top