Ir para conteúdo / Skip to content

Position: fixed no Internet Explorer 6

Postado em: 10 de julho de 2008 por Pedro Rogério

Se você já precisou posicionar elementos fixos na tela, com certeza já percebeu que esse tipo de posicionamento é falho no Internet Explorer 6 e menores, mas, como sempre existe uma forma de fazer as “coisas funcionarem” no IE.

Para que position:fixed funcione no IE6 e anteriores, faremos o uso de expressões proprietárias para converter fixo em absoluto:

Browsers Standard


#elemento_fixo {
    position: fixed;
    top: 100px;
}

Internet Explorer


* html #elemento_fixo {
    position: absolute;
    top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+100+"px" : body.scrollTop+100+"px");
}

Como podem ver, o elemento que possuir o id “elemento_fixo” sempre irá ficar posicionado a 100px do topo independente do scroll da página. Existem outras formas de se obter esse mesmo resultado, mas essa é a mais simples e com certeza a mais suja. Essa dica eu retirei do site: ceslava.com /blog.

Isso pode lhe interessar:

Deixe seu comentário

9 comentários para esse post

  1. Victor Leonardo disse: 10.07.08 ás 08:40
    #1

    Realmente a mais suja e a mais espantosa que já vi. rsrsrs
    De qualquer maneira, temos que pensar mais no usuário e garantir que sua experiência com o site seja a melhor possível.

  2. Rubens Cavalheiro disse: 10.07.08 ás 09:35
    #2

    Sujeira se trabalha com sujeira…

  3. Helder Santana disse: 10.07.08 ás 10:08
    #3

    Interessante, o css padrão do plugin JQModal (em Jquery) vem com isso implementado. Não é a toa que essa é a metodologia mais usada para janelas modais personalizadas.

  4. Alexsandro disse: 10.07.08 ás 10:16
    #4

    Nossa….

    Regra numero 2 do Stive Sounder:

    Avoid CSS Expressions

    CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They’re supported in Internet Explorer, starting with version 5. As an example, the background color could be set to alternate every hour using CSS expressions.

    The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

    Entao por favor… corra mais rápido possivel destas 10,000 evals.

    Fonte: http://developer.yahoo.com/performance/rules.html#css_expressions

  5. André Luís disse: 14.07.08 ás 05:51
    #5

    Vinha aqui deixar o comentário deixado pelo alexsandro…

    Tudo o que seja expressions, mesmo sem pseudo-selectors, vai ser avaliado inúmeras vezes com o disparar de outros eventos.

    Mal por mal, mais vale calcular a posição do viewport do browser via javascript e ir actualizando a posição… pelo menos controlamos as vezes em que a “expression” é corrida. ;) (Isto, só para o IE6, claro.)

  6. Yalli Oliveira disse: 14.07.08 ás 13:09
    #6

    Alguem sabe dizer se já saiu alguma estatística em relação a quantidade de usuários que ainda usam o Internet Explorer 6?

  7. Vitor disse: 17.07.08 ás 11:53
    #7

    @Yalli
    Tem essa estatística aqui: http://www.w3schools.com/browsers/browsers_stats.asp

    Mas me parecem muito otimistas estas estatísticas. Por elas o Firefox já é maioria sobre o IE6 e isso ainda não é verdade nos sites aqui da empresa. A maioria continua sendo o IE6.

  8. Julio César Bitencourt disse: 06.11.08 ás 11:59
    #8

    Como sempre este site salvando minha vida!!! rsrsrs

    Parabéns cara!

  9. lucho disse: 25.11.08 ás 18:37
    #9

    vale compare
    gracias

Deixe seu comentário