Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, inciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser. Abaixo vou mostrar algumas técnicas, algumas desconhecidas por alguns, outras já utilizadas por default por vários desenvolvedores.
1. Generic Reset CSS
Esse com certeza é o mais conhecido e utilizado pelos desenvolvedores:
* { padding: 0; margin: 0; border: 0; }2. Ateneu Popular CSS Reset
html, body,1, 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: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0;} a, a:link, a:visited, a:hover, a:active{text-decoration:none} table { border-collapse: separate;border-spacing: 0;} th, td {text-align: left; font-weight: normal;} img, iframe {border: none; text-decoration:none;} ol, ul {list-style: none;} input, textarea, select, button {font-size: 100%;font-family: inherit;} select {margin: inherit;} hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}3. Chris Poteet’s Reset CSS
* {
vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0; } body { padding: 5px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { margin: 20px 0; } li, dd, blockquote { margin-left: 40px; } table { border-collapse: collapse; border-spacing: 0; }4. Yahoo’s CSS Reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content:''; } abbr,acronym { border: 0; }5. Eric Meyer Reset CSS
Esse com certeza deve ser o mais utilizado entre os desenvolvedores,
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; } :focus { outline: 0; } body { background: white; line-height: 1; color: black; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }:link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } a img,:link img,:visited img { border:none } address { font-style:normal }7. Christian Montoya Reset CSS
html, body, form, fieldset { margin: 0; padding: 0; font: 100%/120% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; } li, dd, blockquote { margin-left: 1em; } form label { cursor: pointer; } fieldset { border: none; } input, select, textarea { font-size: 100%; font-family: inherit; }8. Rudeworks Reset CSS
* { margin: 0; padding: 0; border: none; } html { font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif; text-shadow: #000 0px 0px 0px; } ul { list-style: none; list-style-type: none; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { font-weight: normal; margin: 0 0 1em 0; } cite, em, dfn { font-style: italic; } sup { position: relative; bottom: 0.3em; vertical-align: baseline; } sub { position: relative; bottom: -0.2em; vertical-align: baseline; } li, dd, blockquote { margin-left: 1em; } code, kbd, samp, pre, tt, var, input[type=‘text’], textarea { font-size: 100%; font-family: monaco, "Lucida Console", courier, mono-space; } del { text-decoration: line-through; } ins, dfn { border-bottom: 1px solid #ccc; } small, sup, sub { font-size: 85%; } abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; border-bottom-style: dotted; border-bottom-width: 1px; } a abbr, a acronym { border: none; } sup { vertical-align: super; } sub { vertical-align: sub; } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.6em; } h4 { font-size: 1.4em; } h5 { font-size: 1.2em; } h6 { font-size: 1em; } a, a:link, a:visited, a:hover, a:active { outline: 0; text-decoration: none; } a img { border: none; text-decoration: none; } img { border: none; text-decoration: none; } label, button { cursor: pointer; } input:focus, select:focus, textarea:focus { background-color: #FFF; } fieldset { border: none; } .clear { clear: both; } .float-left { float: left; } .float-right { float: right; body { text-align: center; } #wrapper { margin: 0 auto; text-align: left; }9. Anieto2K Reset CSS
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, center, u, b, i { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; vertical-align: baseline} body { line-height: 1} :focus { outline: 0} ol, ul { list-style: none} table { border-collapse: collapse; border-spacing: 0} blockquote:before, blockquote:after, q:before, q:after { content: ""} blockquote, q { quotes: "" ""} input, textarea { margin: 0; padding: 0} hr { margin: 0; padding: 0; border: 0; color: #000; background-color: #000; height: 1px}10. CSSLab CSS Reset
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: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } a img, iframe { border: none; } ol, ul { list-style: none; } input, textarea, select, button { font-size: 100%; font-family: inherit; } select { margin: inherit; } /* Fixes incorrect placement of numbers in ol's in IE6/7 */ol { margin-left:2em; } /* == clearfix == */.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;}
Nenhum comentário:
Postar um comentário