maio6
Salve galera! hoje vou publicar um método que utilizo sempre para evitar problemas com diferenças no layout entre os browsers (é claro que só isso não resolve totalmente, lógico … não é simples assim, mas já ajuda bastante).
Nos meus desenvolvimentos eu costumo utilizar bastante um método de centralizar a minha página, fazendo com que o conteúdo fique sempre a vista do usuário, mesmo quando ele não está com a janela do navegador totalmente maximizada, para isso eu utilizo o atributo “position:absolute;” do meu elemento principal veja um exemplo abaixo:
#principal {
width:800px;
height:auto;
left:50%;
margin:0 0 0 -400px;
position:absolute;
}
Imagine que meu elemento principal tem 800 pixels de largura, e eu preciso que ele fique centralizado na página, com o atributo “left:50%” nós forçamos o elemento a ir 50% para esquerda da página independente do tamanho que ela seja, e com a margin nós puxamos ele devolta utilizando a metade do seu tamanho em largura “margin:0 0 0 -400px” (lembrando que a largura é 800px então a sua metade é justamente 400px), e por fim utilizandoo atributo “position:absolute”, forçando ainda mais o elemento a manter a posição absoluta à página… foi fácil até agora ? ai é que começa a briga entre os browsers, este caso é somente um exemplo, mas é por essas e outras que utilizo o css cleanner, que nada mais é do que um css incluindo tudo que você utiliza no seu projeto (tags) e zerando todas as suas propriedades, sem isso cada browser ira seguir um padrão e adaptar as suas tags como ele quiserem seguindo um critério próprio … exemplo: Firefox ficara diferente do Internet Explorer, que ficara diferente do Safari e assim por diante (isso mesmo começe a arrancar os seus cabelos), mas já vamos resolver isso 
Este caso abaixo eu costumo utilizar nos meus projetos mas vocês podem adaptar da forma que acharem melhor:
*{
outline-color:invert;
outline-style:none;
outline-width:medium;
}
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, 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-weight: normal;
font-style: inherit;
font-size: inherit;
font-family: inherit;
vertical-align: baseline;
}
uma outra forma que também utilizo quando não vou utilizar muitos elementos:
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;
}
bom é isso ai, espero que tenham gostado.
abraços!
