CSS归一化

不同浏览器对不同的HTML标签的默认属性可能不同，通过归一化，可以消除分歧。

 

from: http://www.allgraphicdesign.com/phpBB2/viewtopic.php?f=59&t=16579

 

 

It seems as though that when people are developing webpages that used heavy CSS (tables, or tableless), its clear that many people have issues with invisible margins or padding, or something else that the browser sets to defaults on any tag. A simple technique that involves normalizing that basically sets up your document in a way that you can work with margins, padding, or anything else in a more proactive and intuitive approach. 

Its actually easier than it looks. At the top of your CSS document, just paste the following code:

 

Code:

/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }

/* Removes list-style from lists */
ol,ul { list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption,th { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

HTML5 CSS归一化

from:  http://www.allgraphicdesign.com/phpBB2/viewtopic.php?f=59&t=23897

People want to start using HTML5 but are limited because of the lack of support in IE. No surprise there. But what most don't know is that unsupported tags just get rendered like <span> tags (inline elements). To expand on what I posted a while ago, this will normalize your CSS but give added support to HTML5 tags by displaying them as block elements. Usually the typical margin: 0 and padding: 0 are good enough for typical normal pages, but any complex site will need a little more.

HTML5 CSS Normalization:

Code:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, 
hgroup, menu, nav, section,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article, aside, dialog, figure, footer, header, 
hgroup, nav, section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}