Posicionamento fixo no Internet Explorer?

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

  •  23-09-2019
  •  | 
  •  

Pergunta

Acabei de escrever uma página de amostra com um banner de canto e uma dica de ferramenta. Tudo está funcionando bem com o Firefox. Mas no IE as coisas não estão funcionando corretamente. Eu naveguei na Internet e descobri que o IE não suporta a posição: corrigido.
Então, alguém sabe como resolver esse problema?
Aqui está o meu código -fonte

<!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>
Foi útil?

Solução

O problema é que o mais popular O mais usado navegador - Internet Explorer para Windows - não o entende e, em vez de reverter para position: absolute; o que seria melhor do que nada, reverte para position: static; conforme especificado pelo padrão CSS. Isso tem o mesmo efeito que não ter position de forma alguma. Observe que o IE 7 da Beta 2 para cima suporta position: fixed; (Se você usar uma declaração de tipo de documento que desencadeia o modo rigoroso), então excluirei o IE 7 desta correção.

Outras dicas

Você quer dizer "não funciona no IE6"? A seguinte posição fixa CSS funciona bem para eu ancorar um rodapé na parte inferior de uma página no IE7 e 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');

Isso flutuaria o elemento no canto superior direito. Se você quisesse posicioná -lo em outro lugar, mude o 0 em expression(0+( para qualquer um dos valores

Internet Explorer 6 entende position:absolute, que é uma boa base para esse trabalho. A semelhança entre absolute e fixed positioning é que ele remove do fluxo do conteúdo normal. Então você usa o top e right Positurações normalmente, com um pouco de JavaScript lá. Não tenho certeza de como ele lê o JavaScript. Mas quem se importa. Funciona ;)

Você pode hackear -o ao usar JavaScript/JQuery.

Por exemplo Qual é a maneira mais simples de ter uma 'posição: fixo' (sempre no topo) div?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top