Într-o lume perfectă, codul (css/xhtml) valid este interpretat identic de toate browserele. Dar, cum nu suntem într-o lume perfectă, există bug-uri, atribute proprietare unui browser sau altuia şi interpretări greşite. Dar, partea bună este că există şi fix-uri pentru acestea. Cu siguranţă, cel mai înjurat browser de toţi web-developerii este IE, în special versiunile pre 7. Cei ce lucrează de mult timp în domeniu, au avut de-a face şi cu capriciile mai multor versiuni ale IE, spre deosebire de cei recenţi (1-2 ani) ce se „luptă” doar cu IE 6 şi, mai nou, IE 7.

De-a lungul timpului, mi-am format un obicei din ce am citit pe diverse forumuri ce mă ajută foarte mult în dezvoltare şi îmi conferă o oarecare siguranţă: fac site-ul pentru Firefox, îl testez în Opera şi Safari şi fac debugging pe IE. Din fericire, până acum nu am avut mari probleme cu Opera şi/sau Safari (de fapt nu am avut deloc ), singurele dureri de cap fiind date de IE, despre care voi scrie puţin.

Pentru Firefox, cel mai bun tool pentru debugging este firebug. În cazul în care nu ştiai şi înjurai cea mai mică problemă, există ceva asemănător pentru IE. Nu este atât de performant, dar are un inspector care, de cele mai multe ori, te ajută foarte mult.

Cele mai mari probleme ale IE sunt deja documentate pe multe site-uri, problema cea mai mare fiind aplicarea soluţiilor respective. Cea mai simplă soluţie, dar nu şi cea mai recomandată, este un fişier CSS comun, unde se aplică diverse hack-uri (ce le vom vedea un pic mai jos). Nu este recomandată deoarece versiuni viitoare ale browserelor pot interpreta greşit acele hack-uri. Nu vrea nimeni ca la un update să i se strice site-ul, nu?

Soluţia optimă este, cu siguranţă, folosirea comentariilor condiţionale, interpretate doar de IE:

1

<!--[if condiţie] HTML <![endif]–>

unde Condiţie ar fi oricare din opţiunile următoare:

• IE - orice versiune de IE
• IE x - o anumită versiune a IE
• lt IE x - IE cu o versiune mai mică de X, unde X este numărul versiunii de IE. (ex lt IE 6)
• lte IE x - IE cu o versiune mai mică sau egală de X
• gt IE x - IE cu o versiune mai mare de X
• gte IE x -IE cu o versiune mai mare sau egală de X

Ok, cum se foloseşte? Metoda aleasă de mine este următoarea:

1
2
3

<!--[if IE]>

	<link rel="stylesheet" href="css/screen_ie.css" type="text/css" media="screen" />
< ![endif]-->

Asta înseamnă că, dacă browserul este IE, se încarcă screen_ie.css. ATENŢIE! Această condiţie se pune în cod DUPĂ includerea stilului principal şi conţine fix-uri pentru TOATE versiunile IE. Acesta e motivul pentru care, în screen_ie.css vom folosi şi hack-uri specifice fiecărei versiuni. Desigur, se poate include câte un fişier pentru fiecare versiune, dar metoda mea mi se pare mai la îndemână

Pentru IE 6, selectorul este

* html  #header {border:1px solid red}

Pentru IE 7

*:first-child+html #header {border:1px solid blue}

Rezultatul: elementul cu id-ul header va avea border roşu pe IE 6 şi border albastru pe IE 7

Bonus, un îndrăgostit de Jack Daniels, a făcut nişte referinţe rapide, utile oricui

Referinţe
http://www.webdevout.net/css-hacks

Debugging in IE - tutoriale video