Andy clarke的“Universal Internet Explorer 6 CSS”与Eric meyer“CSS Reset”

通用Internet Explorer 6 CSS

CSS Code :

CSS代码:

/* -------------------------------------------------------------- 
Standardised Internet Explorer 6 stylesheet:
http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/

Based on the work of:
Mark Boulton: http://markboulton.co.uk
Eric Meyer: http://meyerweb.com
Cameron Moll: http://www.cameronmoll.com/
Richard Rutter: http://clagnut.com
Khoi Vinh: http://subtraction.com

-------------------------------------------------------------- */

html,           body, 
div,            span, 
object,         iframe, 
h1, h2, h3, h4, h5, h6, 
p,              blockquote, 
pre,            a, 
abbr,           acronym, 
address,        code, 
del,            dfn, 
em,             img, 
q,              dl, 
dt,             dd, 
ol,             ul, 
li,             fieldset, 
form,           label, 
legend,         table, 
caption,        tbody, 
tfoot,          thead, 
tr,             th, td { 
margin : 0; 
padding : 0; 
border : 0; 
font-weight : inherit; 
font-style : inherit; 
font-size : 100%; 
font-family : inherit; 
vertical-align : baseline; }

/* Body ---------------------------------------------------- */

body {
width : 60%;

/* http://www.cameronmoll.com/archives/000892.html */
width : expression(document.body.clientWidth < 640? "640px" : document.body.clientWidth > 120? "120em" : "auto");
margin : 0 auto;
padding : 2em 0;
background :  #fff;
font : 88% Georgia, Times, serif;
line-height : 1.4;
color : #333; }

/* Headings ---------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { 
font-weight : normal; }

h1 { 
margin-bottom : .5em;
font-size : 3em; 
line-height : 1; }

h2 { 
margin-bottom : .75em;
font-size : 2em; }

h3 {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

h4 {
margin-bottom : 1.25em;
font-size : 1.2em;
line-height : 1.25; }

h5, h6 { 
margin-bottom : 1.5em;
font-weight : bold; 
font-size : 1em; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { 
margin : 0; }

/* Text elements -------------------------------------------------------------- */

p { 
margin : 0 0 1.5em; }

a {
color : #105cb6; 
text-decoration : underline; }

a:visited { 
color : #105cb6; }

a:focus, a:hover { 
color : #003; }

a img {
border : none; }

blockquote, q {
quotes : "" ""; }

blockquote { 
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px solid #666;
font : italic 1.2em "Times New Roman", Times, serif; }

blockquote:before, blockquote:after, q:before, q:after { 
content : ""; }

strong { 
font-weight : bold; }

em, dfn { 
font-style : italic; }

dfn { 
font-weight : bold; }

sup, sub { 
line-height : 0; }

abbr, acronym { 
border-bottom : 1px dotted #666; }

address {
margin : 0 0 1.5em;
font-style : italic; }

del { 
color : #666; }

pre, code, tt {
margin : 1.5em 1.5em 1.5em -1.5em;
padding-left : 1.5em;
border-left : 1px dotted #666;
font : 1em 'andale mono', 'lucida console', monospace;
line-height : 1.5; }

pre { 
white-space : pre; }

code { 
display : block; }


/* Lists -------------------------------------------------------------- */

li ul, li ol { 
list-style-type : circle;
margin : 0 1.5em .75em 1.5em; }

ul, ol {
margin : 0 1.5em 1.5em 0; }

ul { 
list-style-type : disc; }

ol {
list-style-type : decimal; }

dl {
margin-bottom: 1.5em; 
padding-top: 1.5em; 
border-top : 1px solid #ccc; }

dl dt {
margin-bottom : .75em;
font-size : 1.2em;
line-height : 1.25; }

dd {
margin-bottom: 1.5em; 
padding-bottom: 1.5em; 
border-bottom : 1px solid #ccc; }

/* Tables -------------------------------------------------------------- */

table {
border-collapse : separate; 
border-spacing : 0;
margin-bottom : 1.4em;
width : 100%; }

table, td, th { 
vertical-align : top; }

th, thead th {
font-weight : bold; }

th, td, caption {
padding : 4px 10px 4px 5px; 
text-align : left; 
font-weight : normal; }

th, td {
border-bottom : 1px solid #ccc; }

tfoot { 
font-size : .9em; }

caption {
margin-bottom : 1em;
font-size : 1.5em;
line-height : 1 ; }

/* Forms -------------------------------------------------------------- */

label { 
font-weight : bold; }

fieldset { 
margin : 0 0 1.5em 0; 
padding : 1.4em 1.4em 0 1.4em; 
border : 1px solid #ccc; }

legend {  
font-size : 1.2em; 
font-weight : bold; }

textarea { 
width : 390px; 
height : 250px; 
padding : 5px; }

Eric meyer CSS reset

Eric meyer 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

If I'm making a site which needs to be compatible on IE 6 also then should i use Universal IE6 CSS along with eric meyer css reset or no need or benefit to use Universal IE6 CSS ?

如果我正在制作一个需要在IE 6上兼容的网站,那么我应该使用通用IE6 CSS以及eric meyer css重置还是没有必要或有益使用Universal IE6 CSS?

or i should use both but Universal Internet Explorer 6 CSS only for IE6 , I mean in conditional comment.

或者我应该只为IE6使用Universal Internet Explorer 6 CSS,我的意思是在条件评论中。

or I should use both as a normal css without conditional comment for IE6?

或者我应该使用两者作为普通的CSS而没有IE6的条件评论?

If i should use both then what should be order to place. Which should come first in source?

如果我应该使用两者,那么应该下订单。哪个应该是第一个来源?

3 个解决方案

#1

The Universal Internet Explorer 6 CSS is not a reset CSS. It is not intended to be used with all browsers.

Universal Internet Explorer 6 CSS不是重置CSS。它不适用于所有浏览器。

It is a stylesheet that gives you a text only version of a website. Its purpose is to give a usable website in IE6 without having to spend time to make it look the same as in the other browsers.

它是一个样式表,为您提供网站的纯文本版本。它的目的是在IE6中提供一个可用的网站,而不必花时间让它看起来像在其他浏览器中一样。

See this website: Universal Internet Explorer 6 CSS home page

查看此网站:Universal Internet Explorer 6 CSS主页

and this is what that site looks like in IE6

这就是IE6中该网站的样子

#2

I’m not familiar with Andy Clarke’s stylesheet, but it looks like it’s just doing the same reset work as Eric Meyer’s, then putting in some particular default styles. Nothing particularly helpful for IE 6 (though not unhelpful either).

我不熟悉Andy Clarke的样式表,但看起来它只是像Eric Meyer一样进行重置工作,然后放入一些特定的默认样式。 IE 6没什么特别有用的(虽然也没有帮助)。

I don’t think either of them are especially helpful with IE 6 compatibility. CSS resets are there to give you an almost completely clean slate, by getting rid of most default browser styles.

我不认为它们中的任何一个对IE 6兼容性特别有帮助。通过摆脱大多数默认浏览器样式,CSS重置可以为您提供几乎完全干净的平板。

I find this helpful, because it forces you to think about all your styles, and can save a lot of resetting throughout your stylesheet if, for example, you often use lists for things that shouldn’t have the default browser list styles. But it doesn’t make much difference to working around Internet Explorer’s bugs and missing features.

我发现这很有帮助,因为它会强迫您考虑所有样式,并且可以在整个样式表中保存大量重置,例如,如果您经常将列表用于不应具有默认浏览器列表样式的内容。但是,解决Internet Explorer的错误和缺少功能并没有多大区别。

#3

Personally I go with CSS Reset all the way. In terms of an analogy I see it the same as an artist creating his canvas frame and applying the blank canvas.

就个人而言,我一直使用CSS Reset。就类比而言,我认为它与创作画布框架并应用空白画布的艺术家相同。

I've never been a fan of the Universal IE6 CSS as it seems a bit counter-intuitive to me to reset every element and then apply a whole load of other defaults to the page.

我从来都不是Universal IE6 CSS的粉丝,因为我重置每个元素然后将一大堆其他默认值应用到页面似乎有点违反直觉。

My approach has always been: reset every element (using CSS Reset) and start from scratch, later you may need IE6 specific CSS but from my own experience its normally no more than 4 or 5 elements which can be tagged on using an IE6 conditional CSS file.

我的方法一直是:重置每个元素(使用CSS重置)并从头开始,稍后您可能需要IE6特定的CSS但根据我自己的经验,它通常不超过4或5个元素,可以使用IE6条件CSS标记文件。

#1