CSS Selectors forskellige til Chrome og IE (Avancerede jQuery)

Man skal være opmærksom på at når man laver CSS selectors der er lidt avancerede så er der forskellig syntaks der virker til Chrome og Internet Explorer (IE).

Vi havde et problem med at en selector ikke blev udført i Chrome, og det viste sig at være noget så simpelt som et MELLEMRUM!

Oprindeligt så vores script ud som følger:
$('td[style*="top: 200px"]').css({ 'top': '0px', 'left': '410px' });

Det virkede bare ikke i Chrome, og da vi så tilføjede følgende linie virkede det som det skulle:
$('td[style*="top:200px"]').css({ 'top': '0px', 'left': '410px' });

Så koden endte med at være:
$('td[style*="top: 200px"]').css({ 'top': '0px', 'left': '410px' });  //Works for IE
$('td[style*="top:200px"]').css({ 'top': '0px', 'left': '410px' });   //Works for Chrome

Så i DOM'en i Chrome der er ikke mellemrum, men i IE er der. Hvis du laver den uden mellemrum så virker den ikke i IE, og med mellemrum virker den ikke i Chrome. Så derfor bliver man nødt til at have forskellig kode til Chrome og til IE, som er STORT set identisk!

Som udvikler, så løber det en koldt ned af ryggen at det er lavet sådan, og man behøver at lave noget så ÅNDSVAGT! Problemet er ikke JQuery som vi har brugt, for det mellemrum KUNNE jo være noget der faktisk skulle søges på, hvor den i dette tilfælde er lige meget. Derfor kan man ikke bare sige til jQuery at den skal ignorere det mellemrum i midten, fordi den ved ikke at det er nødvendigt.
Derimod er det åndsvagt at de to implementeringer af udviklere fra team Chrome, og udvikler fra team Internet Explorer (IE) ikke er blevet enige om samme udførsel. Det i sig selv kan man til dels også forstå, men at det ER NØDVENDIGT med sådan en gang lortekode med dublet i en sådan skala får det til at krible over hele kroppen på mig fordi jeg er udvikler, og derfor synes det er ineffektivt kode der er grim og forfærdelig.