2010-03-07 26 views
3

Universal Internet Explorer 6 CSS安迪·克拉克的 “通用Internet Explorer 6中的CSS” 与埃里克迈耶 “CSS复位”

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; } 

埃里克迈耶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: "" ""; 
} 
  1. 如果我正在制作一个需要在IE 6上兼容的网站母鸡 我应该使用通用IE6 CSS随着eric meyer css重置或没有需要或利益使用通用IE6 CSS?
  2. 或我应该同时使用但通用 Internet Explorer 6 CSS只适用于 IE6,我的意思是在条件注释。
  3. 或我应该使用两个作为正常的css 没有条件注释的IE6?

如果我应该使用两个,那么应该是什么顺序来放置。哪一个应该首先来源?

+2

这是偏好的问题,而不是一个编程问题。这可能属于doctype.com – 2010-03-07 11:18:06

回答

2

通用Internet Explorer 6 CSS是而不是重置CSS。它不打算与所有浏览器一起使用。

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

看到这个网站:Universal Internet Explorer 6 CSS home page

this is what that site looks like in IE6

+0

哦谢谢澄清。 – 2010-03-07 13:17:55

0

我对Andy Clarke的样式表并不熟悉,但看起来它只是和Eric Meyer做同样的重置工作,然后放入一些特定的默认样式。对于IE 6没有什么特别的帮助(尽管不是没有帮助)。

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

我觉得这很有帮助,因为它会强制你思考所有的样式,并且可以节省很多重置整个样式表的工作,例如,如果你经常使用列表来表示不应该有默认浏览器列表的东西样式。但是解决Internet Explorer的错误和缺少的功能并没有太大的区别。

+0

我知道CSS重置不是IE浏览器的解决方案,但它有助于重置样式,因此使用重置修复了包括IE在内的所有浏览器中的一些不一致之处。那么对于IE而言,我们需要在CSS中做一些更改 – 2010-03-07 12:19:18

+0

另一种想法是,如果您将不得不将所有样式设置为有价值,则不需要重置这些重置,因为您将它们全部重置为“零”,然后重置他们再次达到你想要的价值。首先将它们设置为你想要的,并忽略任何初始重置。 – Rob 2010-03-07 12:41:36

+0

@Paul D. Waite,@ Rob - Universal IE6 CSS的用途和优点是什么? – 2010-03-07 12:47:22

0

就我个人而言,我用CSS重置所有的方式。就类比而言,我认为它与创建其画布框架并应用空白画布的艺术家相同。

我从来没有成为Universal IE6 CSS的粉丝,因为它似乎有点反直觉,我重置每个元素,然后将其他默认值的整个负载应用到页面。

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