Como obter compatibilidade entre diferentes navegadores web?

Uma tarefa bem chata, cá pra nós, para todo webdesigner é deixar o site compatível com vários navegadores, O site está redondinho no Firefox mas no Internet Explorer 6 e no Safari, o site está totalmente torto. Ai ai ai.

Para lhe ajudar, aqui estão dicas que são fundamentais para tornar nosso site compatível com vários navegadores. Esta dica vem do australiano Antony Short que fez um resumo de algumas dicas básicas para evitar  problemas no momento de conceber um site e evitar o mal funcionamento entre os diferentes navegadores:

1.  Utilize sempre tipo rigoroso de documento (DOCTYPE strict) que cumpram a norma HTML / CSS

2. Utilize sempre um “reset” no início de seu css

3. Use -moz-opacity: 0.99;  sobre elementos de texto para limpar e renderizar no Firefox, e text-shadow: #000 0 0 0 no Safari.

4. Nunca redimensionar imagens em HTML ou CSS
   

5.  Checar rendereização de fontes em cada navegador. Não utilize a fonte Lucida
   

6. Tamanho do texto como % no body  e em ao longo da folha de estilo.

7.  Todos os divs que são flutuantes, deve incluir: display: inline; e overflow: hidden;

8. Os containers devem ter: overflow: auto

9. Não use seletores fantasia CSS3
 

10. Não usar PNG’s transparentes, a menos que tenha colocado alpha.

 

Para o alto e Avante!

Por Bruno Ávila » CSS

14 comentarios on “Como obter compatibilidade entre diferentes navegadores web?”

  • Guilherme

    Ótimas dicas

    09-07-08 » 3:00 pm »

  • Luiz

    Seria interessante citar, que há como desenvolver scripts em javascript, para fazer o css de acordo com cada browser.

    Um Abraço!

    09-07-08 » 6:45 pm »

  • rogerio

    e se fisessemos tudo em tbleless?

    09-07-08 » 8:44 pm »

  • anderson faro

    Boa Bruno e pessoas.

    boas dicas bruno essas ai. parabens.

    gosto sempre de lembrar sempre que é se suma importancia desde do comeco da construcao do site testar sempre nos navegadores, ñ deixar pra depois, evitar os atrazos e os estreses

    valew!

    15-07-08 » 1:00 am »

  • Andreia

    Olá Bruno,

    Esse post caiu como uma luva… pois estou desenvolvendo um site e estou testando-o em 3 navegadores: IE7, Firefox 3 e Ópera 9,5.
    Você acha suficiente os testes nestes 3 brownsers ou é necessário fazer em mais algum, como o Safari?

    Ainda não sei muito sobre CSS (mas estou estudando) e, a maioria das dicas citadas no seu post me deixaram na estaca zero do mesmo jeito pq não tenho tempo hábil para aprender CSS da maneira como deveria. Tenho que entregar o site na próxima semana e, após meus testes nos navegadores, o Internet Explorer 7 é o que tem me dado mais dor de cabeça. Ele não assume as regras dos links, nem das fontes, e to ficando doida com isso.

    No primeiro comentário desse post, o “Luiz” diz que existe uma maneira de burlar o problema dos brownsers com um JavaScript. Se alguém puder me ajudar dizendo se existe e onde posso encontrar um script desses para que eu me baseie e possa resolver o problema do site.

    Agradeço pela atenção e colaboração dos amigos de profissão, pois sabem como é difícil o início de qualquer webdesigner ainda sem grande experiência.

    Um abraço a todos!

    16-07-08 » 3:22 pm »

  • Rafael Lima

    Leia ai e depois nos tiramos nossas duvidas blz

    15-08-08 » 1:19 pm »

  • Jeferson Naztick

    Olá … Bruno

    eu desenvolvi um site que funciona no firefox no iE7 e no opera 9.0 mas no IE 6 ele perde todo css dele …

    será que seria possivel se vc tivesse um tutorial de como fasso essa correção por favor estou desesperado
    obrigado agradeço sua atenção e aproposito parabéns pela matéria

    15-08-08 » 1:29 pm »

  • Sidnei

    Estou tendo dificuldades em redimensionar entre 1024 e800X600 como faço para quando abrir em brawser diferentes de dimensão fique normal sem distorção

    agrdecimentos

    SBLIMASTER

    28-08-08 » 3:23 pm »

  • Sidnei

    Este é o site que estou desenvolvendo para subistituir o presente

    Grato
    SBLIMASTER

    28-08-08 » 3:25 pm »

  • Miquéias

    Parabéns

    16-10-09 » 7:06 pm »

  • Paulo Martinelli

    Já há algum tempo, desenvolvo todos os meus websites testando, a cada inclusão de recurso, nos navegadores: Firefox, IE8, Opera, Google Chrome e Safari.
    Tentando ajustar o CSS para alcançar o máximo de fidelidade neste 5 navegadores.

    Não gosto muito de usar hacks.
    Talvez por isso, até agora, não encontrei nenhuma forma confiável de desenvolver websites que seja fiéis nestes browser e também en versões anteriores do IE, como a 6 e 7.

    Será que há como?

    26-11-09 » 4:44 am »

  • Dereck Andrews

    Muito bom.

    Não apenas o post, mas o blog todo, é perfeito, genial.
    Muita informação, atualidades, e tudo colocado de maneira clara e atraente.
    Bruno você é ótimo.
    Parabéns pelo excelente trabalho e obrigado por dividir informações e conhecimento.

    16-05-10 » 2:22 am »

  • Luiz Angelo

    Achei a materia muito interesante, pois estou com o mesmo problema com os navegadores! Será seria possivel sobre internet explorer, só em CSS e em HTML para ter confiabilidade de rodar redondo.

    28-05-10 » 11:24 am »

  • Gilberto

    Qual a melhro e mais pática regra de CSS Reset? Eu vi que existem várias.

    21-06-10 » 5:08 pm »

Comente!