@codenerd på twitter Mit seneste tweet:

CSS Hack: Position fixed

En af de mest irriterende ting omkring IE6 (når man skal bruge det) er at den ikke understøtter position:fixed. Position:fixed sætter et element til en fast position i forhold til skærmbilledet, og forbliver således på sin plads i det aktive skærmbillede selv når der scrolles. Dette har IE6 og derunder problemer med og det kan derfor være nødvendigt med et hack. Jeg fandt hurtigt et hack vha Google, og har tidligere delt det med andre, som så har påstået det ikke virker, så her kommer en hurtig gennemgang af hacket.

Først skal html og body sættes til 100% med overflow:auto – og der skal sættes en baggrundsfarve!

PHP
1
2
3
4
5
html, body {
    height: 100%;
    overflow: auto;
    background:#FFF;
}

Når dette er klaret, vil alt der bliver stylet som position:absolute; reagerer som var det position:fixed; Dette skal selvfølgelig kun bruges når der er tale om IE6 så derfor er det nødvendigt med lidt browserhacks også. Det nemmeste browserhack der kun påvirker IE6 er at sætte en _ (underscore) foran CSS propertyen, så vi starter med følgende:

PHP
1
2
3
4
5
html, body {
    _height: 100%;
    _overflow: auto;
    background:#FFF;
}

Vi forestiller os derefter vi skal placerer et div med id’et fixed som position:fixed;:

PHP
1
2
3
4
5
6
div#fixed {
    position:fixed; /* firefox, opera, ie7 osv */
    top:100px;
    left:10px;
    _position:absolute; /* IE6 only hack */
}

DIVet vil nu følge med brugeren scroll selv i IE6 som det ses i dette eksempel

Ting som skal huskes!

  1. IE6 skal være i standards compliant mode – dette gøres ved at anvende en korrekt doctype og ikke ha’ noget stående før doctypen
  2. Der skal være en baggrundsfarve på body, html ellers virker det ikke
  3. Margin og padding bør ikke sættes på body da det giver nogle ret spøjse resultater

Alt i alt, er det som med de fleste hacks, det bør kun bruges hvis absolut nødvendigt, men det virker og det er vel det der tæller

Vis eksempel

Skriv en kommentar

Krævede felter er markeret med *.

*