Ir para conteúdo / Skip to content

Evitando problemas de compatibilidade em CSS

blog reactions Postado em: 25 de fevereiro de 2008 por Pedro Rogério

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.

Deixe seu comentário

17 comentários para esse post

  1. Compatibilidade entre navegadores « Adriano Marques disse: 25.02.08 ás 08:57
    #1

    [...] 25 02 2008 Compatibilidade entre navegadores Posted by adrmarques under Sem-categoria   Texto original de Pinceladas da Web [...]

  2. Diogo disse: 25.02.08 ás 10:01
    #2

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

  3. FLX disse: 25.02.08 ás 12:42
    #3

    Tb vou começar a utilizar =D
    valews

  4. TOn disse: 25.02.08 ás 16:19
    #4

    Seria bom se tudo fosse como no FF!
    Mas… Temos que continuar!

  5. Julio Cesar Bitencourt Silva disse: 25.02.08 ás 19:52
    #5

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

  6. Cristian Trentin disse: 25.02.08 ás 20:34
    #6

    Concordo com o Julio

  7. Pedro Rogério disse: 26.02.08 ás 10:24
    #7

    @Julio,

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

  8. Julio Cesar Bitencourt Silva disse: 26.02.08 ás 11:07
    #8

    Muito útil. Lí o artigo ontem e já apliquei em alguns projetos atuais! Parabéns!

  9. Maykon disse: 26.02.08 ás 14:47
    #9

    Não testei ainda, mas pelo visto parece ser muito bom.

    Parabéns..

  10. CSS mínimo | desenvolvimento para web disse: 26.02.08 ás 21:27
    #10

    [...] { margin:0; padding:0; } [update] O Pedro Rogério falou sobre uma maneira melhor de zerar os elementos. Maneira essa que coloco aqui, também. [...]

  11. CSS mínimo atualizado | desenvolvimento para web disse: 26.02.08 ás 21:41
    #11

    [...] o artigo sobre CSS mínimo. Eu vi no blog do Pedro Rogério um artigo falando sobre uma maneira melhor de zerar os elementos para evitar incompatibilidades entre os [...]

  12. Rafael Dourado disse: 27.02.08 ás 09:51
    #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.

  13. Lucas Mezêncio disse: 28.02.08 ás 00:33
    #13

    Comigo não funcionou…
    Ou então sou muito burro…
    Na verdade acho que sou apenas programador…….

  14.   Acabando de vez com os problemas de compatiblidade no CSS TeclaF1 disse: 29.02.08 ás 11:41
    #14

    [...] Explorer, o campeão de “não seguir padrões”. Procurando por opções melhores, achei lá no Pinceladas da Web uma solução, proposta por Eric Meyer esse “milagre” consiste em zerar todos as [...]

  15. Fernando disse: 05.03.08 ás 12:12
    #15

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

  16. Fernando disse: 05.03.08 ás 12:13
    #16

    Boa dica.

  17. Bráulio Silveira disse: 31.03.08 ás 04:11
    #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!!!

Deixe seu comentário