Evitando problemas de compatibilidade em CSS
Postado por: Pedro Rogério emUmas 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
[...] 25 02 2008 Compatibilidade entre navegadores Posted by adrmarques under Sem-categoria Texto original de Pinceladas da Web [...]
Boa dica, vou começar a usar…. vlw!
Tb vou começar a utilizar =D
valews
Seria bom se tudo fosse como no FF!
Mas… Temos que continuar!
Que tal incluir estas propriedades em um arquivo css só pra isso? Daí sempre usá-lo nos projetos? Acho uma boa!
Concordo com o Julio
@Julio,
É o que eu faço hoje em dia, deixo essas propriedades em um arquivo separado!!!
Muito útil. Lí o artigo ontem e já apliquei em alguns projetos atuais! Parabéns!
Não testei ainda, mas pelo visto parece ser muito bom.
Parabéns..
[...] { 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. [...]
[...] 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 [...]
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.
Comigo não funcionou…
Ou então sou muito burro…
Na verdade acho que sou apenas programador…….
[...] 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 [...]
Boa dica, funcionou muito bem. Sem falar que poupou algumas horas de correção de bugs. ;)
Boa dica.
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!!!
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!!
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!
Fiquei o dia inteiro procurando uma solução e achei aqui.
Funcionou maravilha!!!
Só posso agradecer.
Testei e não vi mudança, e os probelma de posicionamento de div com float continuou.
mas vou continuar buscando…
[...] Continue reading here: Evitando problemas de compatibilidade em CSS » Pinceladas da Web – XHTML, CSS, JavaScript e WebStan… [...]
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!
Pedro, tudo bem?
Me perdoe, mas onde devo usar estes codigos, e como? Em pagina separada? Ficarei muito grato se puder me ajudar.
fico muito bom no ff e no chrome, mas no IE fico uma bosta,parece que passou um furacão, esse IE é uma droga
[...] não existe um padrão. Com isso você pode passar por vários problemas ao tentar [...]
Sensacional resolveu meus problemas de compatibilidade com o IE.
Yeah, a lot of people don’t understand “fine print”.