T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
11th November

Internet Explorer 8 CSS hack

IE8 developer toolNedavno nazaj se mi je pojavila težava s prikazom spletne strani v beta brskalniku Internet Explorer 8. Vsi glavni brskalniki (Firefox 3, Opera, IE6 in IE7, Safari ter Chrome) so spletno stran prikazali enako, razen novega beta IE8.
Sam niti nisem bil pozorn na IE8 brskalnik, ker je konec koncev šele beta verzija in po statistiki strani ga ljudje ne uporabljajo.  Naročnik te spletne strani pa ga že uporablja in mi je seveda potarnal, da spletna stran ni OK. Nebodigalen sem si naložil najnovejšo beta verzijo IE8 in res, stran je bila prikazana obupno. Kako se lotiti popravkov?

Mimogrede naj povem, da morate stari developer tool odstraniti iz control panela, drugače vam bo IE vedno jamral, da teče v add-on disabled verziji. Sicer pa je novi IE 8 developer tool precej boljši (čeprav Firebug-u ne seže niti do kolen). Toliko mimogrede.

Ko sem analiziral spletno stran sem predvideval, da IE8 zopet malo drugače sešteva margin in padding razdalje (kot da že razlika med IE6 in IE7 ni zadosti...). Torej Microsoft ni enoten niti pod lastno streho! (bogi mi spletni programerji...)

Rešitev za odpravo nepravilnosti pri prikazu strani za IE8 je več, najpogosteje pa sta dve. Ena so posebni CSS selektorji, ki jih prepozna samo določen brskalnik, druga je pisanje CSS dokumenta glede na brskalnik (za vsakega svojega - v glavi dokumenta naredimo selekcijo).

Posebni CSS selektor, ki ga prepozna samo Internet Explorer 8 je

CSS:
  1. html:first-child selector [attr|=a-b] { property: value; }

drugi  način pa

CSS:
  1. // Hidden syntax (C-style):
  2. @cc lte IE 8 .programInfo ul
  3. {
  4. margin-left: 60px
  5. }
  6. // Revealed syntax (BASIC-style):
  7. @cc !IE begin;
  8. margin-left: 60px
  9. @cc end;

Obstaja še nekaj CSS trikov za IE8, vendar jih sam nisem preizkusil in jih bom opisal ob naslednji priložnosti.

CSS pa je na koncu tudi prestal validacijo, tako da očitno trik deluje.

Povezave:
http://www.brunildo.org/test/csshacksQ.html
http://www.brunildo.org/test/csshacks3.html (prepoznavanje brskalnika s CSS ukazi)
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. CSS triki – selektorji za Internet Explorer
  2. Internet Explorer 8 beta1 na voljo
  3. Microsoft Internet Explorer 8 kot obvezna nadgradnja
  4. CSS triki za Google CHROME brskalnik
  5. Internet explorer 8 – podpora HTML & DOM standardom
  6. Bo Internet Explorer 6 kmalu preteklost?
  7. Zaokroževanje robov s CSS ukazov
  8. Barvni prehodi s CSS
  9. Več nivojski CSS selektorji
  10. CSS 3 delovne skupine – zadnji sklepi

3x komentirano na “Internet Explorer 8 CSS hack”

  1. Albin je napisal:

    A tale koda html:first-child selector [attr|=a-b] { property: value; } se vpiše povsem na začetek css dokumenta?

  2. Antony je napisal:

    ne, kamor koli. To je za specifični element znotraj kode. Enak princip kot za za IE6 "* html ..."

  3. acne je napisal:

    Tale IE8 me prav jezi. Kot napisano v vseh dela ok FF, IE6,7 opera, ko pa sem 8ko pogledal pa me je zadelo. Vse podrto in čudno in še slabše kot stara IEja pred modifikacijo. tale microsoft ga pa res serje in upamo da po koncu bete ne bo več tako neumno.

Dodaj komentar