Meu browser predileto é o Firefox, por isto sempre que estou criando algo, tenho o costume de ir testando nele.

O problema é que quando abro meu site (que está lindo no Firefox) no Internet Explorer, fica tudo desalinhado. Mexe aqui, mexe ali, e consigo deixar tudo bonito no IE. Mas quando abro o site no Firefox novamente, ferrei tudo…

Quantas vezes você já passou por isto?

Passei por isto ontem (mais uma vez) e resolvi ir atrás de alguma ferramenta que me ajudasse neste trabalho.

Primeiro encontrei um Javascript que me permite diferenciar as propriedades do CSS de acordo com o browser e até com o sistema operacional:

[source:js]
var css_browser_selector = function() {
var
ua=navigator.userAgent.toLowerCase(),
is=function(t){ return ua.indexOf(t) != -1; },
h=document.getElementsByTagName(’html’)[0],
b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?(’ie ie’+RegExp.$1):is(’gecko/’)? ‘gecko’:is(’opera/9′)?’opera opera9′:/opera (\d)/.test(ua)?’opera opera’+RegExp.$1:is(’konqueror’)?’konqueror’:is(’applewebkit/’)?’webkit safari’:is(’mozilla/’)?’gecko’:”,
os=(is(’x11′)||is(’linux’))?’ linux’:is(’mac’)?’ mac’:is(’win’)?’ win’:”;
var c=b+os+’ js’;
h.className += h.className?’ ‘+c:c;
}();
[/source]

Isto por si só já facilita muito as coisas. Posso criar um CSS assim, por exemplo:

[source:css]
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
[/source]

Entre as opções de browser estão: ie, ie5, ie6, ie7, firefox, opera, konqueror, safari e outros.

Outra coisa interessante que encontrei para estes casos é o CSSVista (apesar do nome só tem uma versão para o Windows XP). Este software permite que você altere o CSS enquanto vê uma versão do site no IE e no Firefox ao mesmo tempo.