Claro, não estou dizendo que você deve correr para tirar todos os componentes do FB do seu site. Os ganhos ainda superam, e muito, quaisquer eventuais perdas. Mas quero mostrar dois lugares importantes que precisam estar nas bookmarks de todos que lidam e utilizam os componentes do FB:

Developers Forum

Fórum oficial da plataforma, aqui você encontrará milhares de tópicos sobre os mais diversos problemas e dúvidas à respeito das APIs e plugins do Facebook. Quando perceber que algo que sempre funcionou passou a se comportar de maneira estranha dê uma olhada aqui. É onde os primeiros relatos envolvendo bugs aparecem. Também é útil por que além de reportar problemas, os desenvolvedores postam os workarounds e possíveis correções para cada falha.
http://forum.developers.facebook.net/

Bug Tracker

É o Bugzilla da Facebook Platform. Nela desenvolvedores de todo o mundo reportam seus problemas diretamente para a equipe de programadores do FB através do cadastro de Bugs. Depois de ser cadastrado, cada bug passa por uma triagem e, se confirmado, é escalado para a equipe responsável. É o melhor lugar para buscar informações sobre os problemas mais graves e obter respostas oficiais do time de desenvolvedores da plataforma. É possível também votar nos bugs que você considera mais graves para tornar sua correção prioritária em relação aos outros.
http://bugs.developers.facebook.net/

URL Linter

Esta ferramenta permite analisar uma URL e checar se as tags utilizadas pelo Facebook para o compartilhamento da página estão aplicadas de maneira correta. Com ela é possível verificar de onde o sistema da rede social importa as informções que servem como título, descrição e thumbnail do link quando a página é compartilhada. Dessa forma podemos refinar as informações, aplicar as tags corretamente e identificar possíveis problemas.
http://developers.facebook.com/tools/lint/

.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
margin: -150px 0 0 0;
}

Entenda o que fizemos em cada uma das linhas:

width: 600px : configuramos a largura do elemento que queremos centralizar;
height: 600px : configuramos a altura do elemento que queremos centralizar;
position: absolute : deixamos o elemento posicionado absolutamente na página;
top: 50%; : posicionamos o topo do elemento no meio da página, verticalmente;
margin: -150px 0 0 0; : para compensar, colocamos uma margem superior com a metade da altura;

Pronto, basta adicionar a classe “centralizado” ao seu elemento e ele ficará posicionado no centro vertical da sua página.
E claro, você pode usar o mesmo princípio se quiser centralizar também na horizontal, basta fazer duas pequenas alterações no código, colocando a propriedade left e alterar a margem esquerda. Veja:

.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -300px;
}

O que alteramos do código anterior:

left: 50% : posicionamos a borda esquerda do elemento no meio da página, horizontalmente;
margin: -150px 0 0 -300px : para compensar, colocamos uma margem esquerda com a metade da largura;

É isso aí, agora o elemento ficará posicionado bem no centro da página, horizontalmente e verticalmente. Veja aqui o exemplo publicado.

Primeiro: o Firefox também tem seus bugs, a própria Mozilla Foundation mantém uma página exclusivamente dedicada à eles, a Bugzilla. Claro, é verdade que se o erro for apenas no Firefox, é possível simplesmente corrigir o CSS para ele e usar um hack do IE para que as coisas fiquem perfeitas nos dois browsers.
Porém, a questão é: O Firefox 3 interpreta algumas propriedades diferentemente do Firefox 2, o que hora ou outra pode causar problemas. E nesses casos é preciso alterar o CSS para apenas uma das versões.

Segundo: Em alguns casos é necessária uma correção urgente, que não demande tempo para vários testes, alterações no HTM ou várias linhas de CSS. Se o seu site tem milhares de acessos por hora, o ideal é corrigir primeiro, refinar depois.

Seguem então algumas soluções que venho usando:

CSS Hack apenas para Firefox 2

Se o seu site está apresentando erro apenas no Firefox 2, agradeça. É o cenário mais simples de resolver, basta usar o seguinte hack:

#meudiv { background:red; } /* todos os navegadores */
#meudiv[id=meuDiv] { background:green; }/* só Firefox 2 */

Como funciona: usamos o seletor de atributos entre chaves para selecionar todos os elementos que tenham id = ‘meuDiv’. Porém perceba que o ‘D’ está maiúsculo. Só o Firefox 2 é case-insensitive, ignorando letras maiúsculas e minúsculas. Ou seja, para o Firefox 2 meudiv é igual a meuDiv, para todos os outros navegadores não.

CSS Hack para Firefox 3

O problema só aparece no Firefox 3? Bem, aqui as coisas complicam um pouco. Isso porque todos os hacks específicos para esta versão não são totalmente confiáveis em todas as plataformas [windows, mac, linux]. O único hack para FF3 que se comporta de maneira constante em todos os sistemas tem um porém: é reconhecido também pelo IE7:

#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */

Então é preciso, ao final, adicionar uma linha para restabelecer o valor para o IE7:

#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */
#meudiv { *background:red; } /* Restabelece valor para o IE7 */

E, só pra relembrar: ‘Hack’ para qualquer Firefox

Se o problema está aparecendo nas duas versões do Firefox, a solução mais simples é corrigir o CSS focando este erro e, caso o erro venha a ocorrer no IE após a correção, utilizar hacks para o navegador da Microsoft:

background-color:red; /* Corrige o problema no FF */
*background-color:blue; /* Retorna o valor para IE */ 

Se tiver dúvida dê uma olhada aqui: CSS Hacks – IE6, IE7, Firefox

Enfm, mais hacks… Eu gostaria de não precisar deles, gostaria de escrever meu CSS 100% válido e não ter que redeclarar margin, padding, float duas, três vezes no mesmo código por causa de um ou outro navegador. Mas infelizmente isso não é possível..

Para tornar essa tarefa um pouco mais fácil (e menos penosa) seguem aqui algumas dicas que podem fazer toda a diferença, transformando aquelas 2 horas que muitas vezes levamos apenas pra descobrir qual o problema em uma correção muito mais simples e rápida.

1 – Instale o Firebug e a IE Developer Toolbar

Eu sei. Você tem preguiça de adicionar mais uma extensão ao seu já abarrotado Firefox e gosta ainda menos da idéia de instalar uma toolbar no Internet Explorer. Eu também. Mas acredite, se você trabalha desenvolvendo CSS e HTM, você precisa delas, e é de se espantar que ainda não as tenha.
Por quê? O que elas têm de tão interessante!? Simples e genial: com elas você pode “inspecionar” cada um dos elementos HTML da página: basta clicar em qualquer div, parágrafo ou lista e todas as suas propriedades serão exibidas (width, height, float, etc..). E o melhor, é possível editar cada uma das propriedades no próprio navegador e ver o efeito imediatamente. Assim fica muito mais fácil testar várias alterações no código até chegar na melhor solução. O que está esperando, instale agora! Seguem os links:
IE Developer Toolbar | Firebug

2 – Mantenha as correções num bloco separado

A menos que a correção seja muito simples ou que se tenha muita sorte, geralmente não acertamos na primeira. Sempre é preciso um ou outro pequeno ajuste, alterando o valor da margem ou adicionando um pixel na largura, etc.. Também é comum que se precise mexer em mais de um elemento para chegar à um resultado ideal. Por isso, enquanto estiver corrigindo, mantenha suas alterações num bloco separado, de preferência ao final do CSS. Assim será muito mais fácil testar outras opções e aprimorar o código.

3 – Use !important

Muitas vezes não temos controle sobre todos os CSS’s carregados pela página (no caso de algums CMS’s por ex). Isso somado ao fato de que quanto mais específico o seletor maior a sua importância pode causar alguns problemas. Por exemplo:
/*A linha:*/
body div#topo h1 a { color:red; }
/*tem maior importância que a linha:*/
#topo a { color: black; }
Ou seja, mesmo que a linha alterando a cor para “black” venha depois da “red”, ela não terá nenhum efeito, pois a primeira é mais específica, com o caminho hierárquico completo do elemento (nesse caso o “a”). E às vezes quando se está corrigindo o CSS, alteramos alguma propriedade para solucionar um problema e isso não surte nenhum efeito, e gastamos muito tempo tentando entender por que não está dando certo ou buscando outra alternativa quando na verdade o que foi feito está correto, só não está funcionando por que existe algum seletor hierarquicamente mais importante setando a mesma propriedade.

Por isso, quando estiver corrigindo uma style sheet e acontecer algo desse tipo experimente usar “!important” à frente do valor da propriedade. Isso fará com que ela se torne mais importante do que qualquer outra linha que possa existir e que esteja setando a mesma propriedade, mesmo que venha depois dela.  Por exemplo:
body div#topo h1 a { color:red; }
#topo a { color: black !important; }
body div#topo h1 a { color:green; }
No exemplo acima o elemento “a” ficará com sua cor preta mesmo tendo linhas com seletores mais específicos o configurando para vermelho e outra configurando para verde. Isso por que usei o !important.

4 – Monte uma boa plataforma de testes

Nada mais improdutivo do que a necessidade de, a cada pequena alteração de código, ter que publicar vários arquivos ou ter que pedir pra alguém “dar uma olhada no ie6″ para saber se a correção teve sucesso. O que deveria levar alguns segundos, o tempo de um Ctrl+S e um F5, demora 5, 10 minutos dependendo da publicação ou da disponibilidade do seu “beta-tester”. Se forem necessárias cinco ou seis mexidas até encontrar o melhor resultado lá se foi um hora.

Então:

- gaste algum tempo instalando todos os browsers relevantes para a sua audiência. Caso tenha algum problema com versões diferentes do IE experiemente o Multiple IE. Para outros browsers uma boa opção é o BrowserShots.

- se o seu site roda em um ambiente dinâmico [php, asp, etc] leve em consideração a instalação de um servidor local na sua máquina. Apache e Personal Web Server são opções simples e não consomem tanta memória. Com eles você poderá simular o ambiente online e fazer correções mais rapidamente e sem riscos.

- mantenha as pastas publicadas sincronizadas com sua cópia offline, isso favorece a simulação do ambiente online e proporciona um melhor diagnóstico dos problemas.

Por isso aqui vão algumas dicas para resolver os problemas mais comuns com o velho navegador da Microsoft.

“A minha div está com a margem maior [duplicada]!”

Esse é um dos bugs mais comuns. Quando um elemento usa float:left e tem uma margem esquerda [margin-left] o internet explorer 6, sabe-se lá por quê, duplica o valor desta margem.
Solução:
Basta adicionar um display:inline na div ou em outro elemento que apresente esse problema.

“Tenho uma div com 100% de altura [height:100%] mas não está funcionando.”

Quando você tem uma div com 100% de altura dentro de outro elemento sem altura definida o internet explorer 6 não ‘entende’ e exibe o layout de maneira errada.
Como resolver:
Defina uma altura fixa para o elemento que contém a sua div.

“Minhas imagens PNG estão sem transparência”

É. IE6 não renderiza corretamente PNGs com transparência, o que torna seu uso um pouco arriscado, mas não impossível.
Solução:
Existe um patch quase desconhecido lançado pela Microsoft que corrige este problema, adicione ao seu CSS:
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);

“O Layout tem duas [3, 4] colunas com float:left mas uma delas sempre “cai” pra baixo da outra ao invés de ficar ao lado”

Isso também é comum, e pode ter dois motivos. Primeiro: se a sua coluna tem margin-left, o internet explorer 6 pode estar duplicando a margem então o espaço restante acaba sendo insuficiente e a sua coluna “cai”. Segundo: mesmo que a sua coluna tenha uma largura definida, se houver qualquer elemento com largura maior dentro dela, o internet explorer 6 irá expandí-la.
Como resolver:
Primeiro, se sua coluna tem margin-left, coloque um display:inline pra ela.
Se o problema não for esse, provavelmente existe algum elemento forçando a largura da coluna. Procure por este elemento e arrume a sua largura. Se você não está encontrando coloque um overflow:hidden na sua coluna.

“Meus itens de lista estão com o marcador desalinhado”

Provavelmente você está usando padding-top no seu <li>.O ie6 não lida muito bem com paddings.
Solução:
Troque o padding-top por margin-top.

E o gran finale:

“O ie6 está duplicando o final da minha última <li>, ou do meu último parágrafo!”

Esse bug é chato. Muito chato. Acontece por que o ie6 sempre “duplica o final do conteúdo do último elemento de uma série elementos com float:left que tenham comentários entre eles”. Acredite ou não, é isso.
Como resolver:
Primeiro, tente retirar todos os comentários entre estes elementos. Se não for possível, coloque float:none nestes elementos e trabalhe com largura, altura e position para posicioná-los corretamente

Espero que ajude.

Veja também : CSS hacks – ie6, ie7, firefox