24.7.2007 kl. 10:55

<nerdalert>

Ég hef undanfarið fengist við að hanna nýjan vef sem ég ætla að setja í loftið. Álit mitt á Internet Explorer sem vafra hefur verið borðliggjandi lengi vel, og Time Breakdown of Modern Web Design er jafn satt og áður -- lítið brot af tímanum fer í að hanna útlit og útfæra það í HTML. Mikill tími fer hins vegar í að láta vefi *virka* í IE. Eitt af skemmtilegri CSS2 eiginleikunum sem IE styður *EKKI* er position: fixed eiginleikinn, þar sem element á síðunni haldast á sínum stað þótt maður skrolli niður síðuna, eins og sést t.a.m. hérna.

Hins vegar uppgötvaði ég frekar nett hakk til að bjarga síðunni frá því að renderast hryllilega í IE. Í tilfelli þeirrar síðu sem ég var að hanna, þá voru bara tvö element með position: fixed eiginleikann. Síðan renderast hins vegar á viðunandi hátt í IE ef þessi element eru í staðinn með eiginleikann position: absolute. Ein lausn væri að hlaða sérstöku stylesheet sem override-ar fyrrum declarations -- en það er aukalegt HTTP request, og við viljum það auðvitað ekki. Maður keyrir frekar bara smá JavaScript kóða sem dýnamískt breytir style eiginleikum í Document Object Módelinu.

Með hjálp optimized IE greiningartrikks frá Má Örlygssyni breytir eftirfarandi kóði position eiginleikanum á tveimur fixed elements yfir í absolute ef vafrinn er IE.

<script lang="javascript" type="text/javascript">

var is_ie/*@cc_on = {
  version : parseFloat(navigator.appVersion.match(/MSIE (.+?);/)[1])
}@*/;
if (is_ie)
{
    document.getElementById("logo").style.position = "absolute";
    document.getElementById("sidebar").style.position = "absolute";
}
</script>

Þannig fæ ég flottu fixed hegðunina í alvöru vöfrunum án þess að síðan sé fucked í IE.

</nerdalert>