Eroja selaimien välillä

Merri

Ylläpitäjä
Vastuuhenkilö
Ylläpitäjä
Ajattelinpa heittää tälläistä, kun tuli itselläni ajankohtaiseksi. Selaimilla on hauskoja pieniä eroja ja toisista puuttuu joitakin ominaisuuksia. Lähden XHTML 2:n ja CSS 2:n tuesta liikkeelle.
Osa tässä kertomastani saattaa olla pitämättä kutiansa, mutta aina voi lähteä korjailemaan.

IE:n elementtien minimikorkeus riippuu fontista
Tämä on aina poikkeuksetta fontin koon mukaan määritetty. Ts. vaikka yrittää kuinka määrätä DIVin kooksi 1px, näkyy DIV fontin korkuisena. Ongelmaa voi yrittää kiertää määrittämällä fontin kooksi 1pt CSS:n avulla, joskin ainakaan itse en ole saavuttanut 2 pikselin korkeutta alempaa. Eri fonttien kokeilu lienee paikallaan.

IE ei tue fixed-muotoilua
Tämä on uusi CSS-määritelmä, jota IE ei vielä tue, eikä tule tukemaankaan koska Microsoft on lopettanut IE:n kehittämisen (paitsi Longhorniin upotetun version, mutta mitäpä se nyt XP:hen ja muihin Windowseihin vaikuttaisi). Esim. position: fixed; toimii täysin oikein Operalla ja Firebirdillä. IE näyttää sivun kuin positionia ei olisi ollenkaan määritetty.

Huomiona sanottakoon vielä, että ainakaan Gecko-moottorissa fixediä ei ole otettu kunnolla huomioon, vaan sivua vierittäessä ruudunpäivitys on hidasta koneen nopeudesta riippumatta. Operassa vastaava toimii n. 50% nopeammin. Mikäli molemmissa selaimissa koodi optimoitaisiin, olisi ruudunpäivitys huomattavasti parempaa (pystyisin tekemään sujuvan vastaavan päivityksen Visual Basicilla, ei siihen tarvita kuin yksi ylimääräinen paikallaan pysyvä layer josta jotkut kohdat näkyvät lävitse).

Gecko-moottori käsittelee prosentuaaliset leveydet ottamatta huomioon marginaaleja
Kun esimerkiksi DIVin leveydeksi määrittää 100%, näyttävät Gecko-ytimen selaimet tämän DIVin koko sivun levyisenä, sen sijaan että leikkaisi pois marginaaleja. Opera ja IE taas ottavat marginaalit huomioon jolloin 100% ei ole koko sivun levyinen, vaan jättää marginaaliraot. Marginaalit voi poistaa lisäämällä BODY:n CSS:ään margin: 0px; (Operassa näyttäisi tarvitsevan myös komennon padding: 0px;).



Ken löytää tai tietää lisää, kirjoittakoon lisää. Lisäkeskustelukaan ei ole pahitteeksi. Itse käytän Firebird 0.61:htä, Opera 7.11:sta ja IE 6:tta sivujen testauksessa.
 
CSS (liekö CSS2)-ominaisuus border-spacing ei toimi IE:ssä, joten IE:tä varten taulukkoon pitää lisätä html-koodiin erikseen cellspacing-määre.

IE varaa sivun laidasta aina tilan vierityspalkille. Ainakaan Opera 7.11 ja Firebird 0.6.1 eivät sitä tee, joten vierityspalkkia vaativa sivu hypähtää vasemmalle ladattaessa.

Testaamiseen käytän samoja selaimia kuin Merrikin + lisäksi Lynxiä. Yhdellä selaimella testaaminen ei ole järkevää. Yleensä aina löytyy jokin ominaisuus, mikä ei toimikaan toisessa selaimessa kunnolla, vaikka koodi olisi validia.
 
Ylös