em
Evitando problemas de compatibilidade em CSS

Evitando problemas de compatibilidade em CSS

Umas das coisas que mais atormentam os desenvolvedores hoje em dia é a forma como cada browser trata diferentemente as propriedades CSS. Já basta as diferenças de renderização que existem entre os Internet Explorer 6 e 7, onde acaba aumentando ainda mais nossos problemas. Durante muio tempo eu sofri com isso, ao decorrer do desenvolvimento de um site, tudo corria bem, mas derrepente, tudo ia por água abaixo no IE, mais uma vez ele, estragando a nossa vida, insistindo em ser superior em tudo, não seguindo corretamente padrões estabelecidos. Mas espera aí, sempre que eu iniciava meu CSS, as primeiras declarações eram sempre essas:


* {margin:0; padding:0}

Isso fazia com que todos os objetos da página iniciassem com suas margens e paddings zerados, para tentar igualar os objetos entre os browsers, mas não era suficiente. Foi então que conheci uma solução proposta por Eric Meyer, onde ele reseta todas as propriedades HTML para que fiquem iguais em todos os navegadores.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

No começo senti uma certa resistência em utilizar todas essas propriedades CSS em meus projetos, sendo que um simples seletor universal resolvia tudo, mas após utilizá-los meus problemas diminuiram quase que totalmente, no Internet Explorer então, dava até gosto de ver, tudo bonitinho. Experimente você também, pelo menos uma vez, e poste aqui sua experiência. Depois não diga que eu não avisei.

Comentários

  1. Pingback: Compatibilidade entre navegadores « Adriano Marques

  2. Boa dica, vou começar a usar…. vlw!

    por Diogo Responder
  3. Tb vou começar a utilizar =D
    valews

    por FLX — Responder
  4. Seria bom se tudo fosse como no FF!
    Mas… Temos que continuar!

    por TOn Responder
  5. Que tal incluir estas propriedades em um arquivo css só pra isso? Daí sempre usá-lo nos projetos? Acho uma boa!

    por Julio Cesar Bitencourt Silva Responder
  6. Concordo com o Julio

    por Cristian Trentin Responder
  7. @Julio,

    É o que eu faço hoje em dia, deixo essas propriedades em um arquivo separado!!!

    por Pedro Rogério Responder
  8. Muito útil. Lí o artigo ontem e já apliquei em alguns projetos atuais! Parabéns!

    por Julio Cesar Bitencourt Silva Responder
  9. Não testei ainda, mas pelo visto parece ser muito bom.

    Parabéns..

    por Maykon Responder
  10. Pingback: CSS mínimo | desenvolvimento para web

  11. Pingback: CSS mínimo atualizado | desenvolvimento para web

  12. Eu utilizo o CSS Reset do Yahoo User Library. Junto com o CSS Fonts é uma solução tanto para as diferenças entre os navegadores quanto a alteração do tamanho das fontes em pixel do IE6.

    por Rafael Dourado Responder
  13. Comigo não funcionou…
    Ou então sou muito burro…
    Na verdade acho que sou apenas programador…….

    por Lucas Mezêncio Responder
  14. Pingback:   Acabando de vez com os problemas de compatiblidade no CSS TeclaF1

  15. Boa dica, funcionou muito bem. Sem falar que poupou algumas horas de correção de bugs. ;)

    por Fernando Responder
  16. Boa dica.

    por Fernando Responder
  17. Muito bom!!!
    Antes eu tbm soh colocava
    * {margin:0; padding:0}

    Mas deste modo eh perfeito, bem mais completo.
    Ajudou bastante!
    Eu jah conseguia fazer com que naum
    desse conflitos entre navegadores, mas sempre ficava
    algo diferente, entre um e outro,
    agora a proximidade eh bem maior!

    Vlw!!!

    por Bráulio Silveira Responder
  18. Cara sou iniciante estava como muita dificuldade para resolver um problema de compatibilidade no IE(maldito seja). Fiquei muito emocionado ao descobrir que funciona perfeitamente. Muitíssimo agradecido!!

    por Jefferson — Responder
  19. Boa tarde, eu testei ele aqui e deu vários problemas… Mas a idéia é muito boa! Quem dera se um dia todos os brownsers fossem compatíveis!

    por Raphael Fagundes Responder
  20. Fiquei o dia inteiro procurando uma solução e achei aqui.
    Funcionou maravilha!!!
    Só posso agradecer.

    por Reinaldo — Responder
  21. Testei e não vi mudança, e os probelma de posicionamento de div com float continuou.
    mas vou continuar buscando…

    por Luis Carlos — Responder
  22. Pingback: Evitando problemas de compatibilidade em CSS » Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards

  23. Olá pessoal, resets são ótimos mesmo, sempre uso o do Erick Meyers, mão na roda!

    Eu gostaria de uma ajuda, alguém tem um macete pra que a distância dos list-styles fiquem iguais no FF e IE(CA)?

    Abraços, bom post!

    por Daniel Responder
  24. Pedro, tudo bem?
    Me perdoe, mas onde devo usar estes codigos, e como? Em pagina separada? Ficarei muito grato se puder me ajudar.

    por Cesar Souza Responder
    1. fico muito bom no ff e no chrome, mas no IE fico uma bosta,parece que passou um furacão, esse IE é uma droga

      por diego — Responder
  25. Pingback: Técnicas para reset CSS :: Top Tutoriais

  26. Sensacional resolveu meus problemas de compatibilidade com o IE.

    por Sérgio Rezende Júnior — Responder
  27. Yeah, a lot of people don’t understand “fine print”.

    por Warner Matakonis Responder
  28. Vlw deu certinho resolveu meu problema

    por lucas — Responder
  29. Cara,

    o site sai uma tesaozinha no ff, IE e opera…
    Já no chrome, a logo do site sai pra fora da borda direita da div geral.
    Eu usei o código e deu na mesma! Sabe mais alguma coisa, amigo.

    Valeu

    por lucas ribeiro — Responder
  30. Excelente, valeu.

    por Lucas — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>