重置代码对比
|
|
Dawn[http://mingelz.com] |
备注 |
||
|
1 |
body,div, dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6, pre,code, form,fieldset,legend,input,textarea, p,blockquote, th,td {margin:0;padding:0;} |
body, h1,h2,h3,h4,h5,h6,hr,p,blockquote, dl,dt,dd,ul,ol,li, pre, form,fieldset,legend,button,input,textarea, th,td {margin:0;padding:0;} |
body, h1,h2,h3,h4,h5,h6, dl,dt,dd,ul,ol,li, th,td, p,blockquote,pre, form,fieldset,legend,input,button,textarea, hr {margin:0;padding:0;} |
1、div、code是没有内外边距的，可去除； 2、input根据不同的type，可能有内外边距，应加上； 3、hr是有外边距的，但我们实际使用中该值不定，应加上； |
|
2 |
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} |
h1{font-size:18px;} h2{font-size:16px;} h3{font-size:14px;} h4,h5,h6{font-size:100%;} |
h1,h2,h3,h4,h5,h6 {font-size:100%;} |
1、对于不同页面，hn的字体大小不可能相同； 2、标题肯定是要着重显示的，不加粗才属于特例； 结论：只重置字体大小，不重置字体粗细； |
|
3 |
li {list-style:none;} |
ul,ol {list-style:none;} |
li {list-style:none;} |
1、list-style样式确实是定义在li标签上的； |
|
4 |
fieldset,img {border:0;} |
fieldset,img {border:0;} |
fieldset,img {border:0;} |
1、input、select、textarea默认也有边框，基于优雅降级的思想没有将它们的边框在Reset中清除，当使用背景图片修饰时，记得清除边框； |
|
5 |
table {border-collapse:collapse;border-spacing:0;} |
table {border-collapse:collapse;border-spacing:0;} |
table {border-collapse:collapse;border-spacing:0;} |
- |
|
6 |
q:before,q:after {content:”;} |
q:before,q:after {content:”;} |
q:before,q:after {content:”;} |
1、q标签默认会在内容前加前引号（“）在内容后加后引号(”)，可能会影响实际效果，故去除； |
|
7 |
abbr,acronym {border:0;font-variant:normal;} |
abbr[title],acronym[title] {border-bottom:1px dotted;cursor:help;} |
abbr[title] {border-bottom:1px dotted;cursor:help;} |
1、IE6不支持abbr标签，HTML5“抛弃”了acronym标签； 2、IE6不支持属性选择符； 结论：既然使用了属性选择符，也就代表着不再对IE6提供支持，就让我们大胆的对IE6及它的acronym说Byebye吧！ |
|
8 |
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
caption,th {text-align:left;} |
address,cite,dfn,em,var {font-style:normal;} |
address,cite,dfn,em,var {font-style:normal;} |
1、address、cite、dfn、em、var默认为斜体，可扶正； 2、caption、strong、th默认为粗体，对于这种语义化标签不加粗才属于特例，可保留； 3、capton、th默认为居中，可保留，原因同上，不居中才属于特例； 4、code默认无此方面样式，可去除； 5、单独说下em和strong，em表示强调、strong表示更强的强调，所以这里我去除em样式而保留strong样式，一般强调使用em，没有任何样式，而对于strong还不加粗那真的属于特例了； |
|
9 |
input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select {*font-size:100%;} |
button,input,select,textarea {font-size:100%;} |
button,input,select,textarea {font-size:100%;} |
1、表单元素在IE中默认不继承字体大小； 2、button默认不继承字体大小，应添加上； 3、optgroup默认为斜体，且无法扶正； |
|
10 |
legend {color:#000;} |
legend {color:#000;} |
legend {color:#000;} |
1、IE6下legend元素颜色继承自Windows系统的主题样式； 2、请在页面布局时根据实际需要修改legend颜色； |
|
11 |
html {color:#000;background:#FFF;} |
- |
- |
1、所有浏览器默认相同； 2、背景颜色可能会继承自Windows系统的主题颜色； 结论：在实际项目中根据需要定义不同颜色； |
|
12 |
sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} |
- |
- |
1、所有浏览器默认样式为： sup{vertical-align:super;} sub{vertical-align:sub} 2、super比text-top更高、sub比text-bottom更低； 3、在默认样式下，如果行高太小，sub、sup会被遮挡； |
|
13 |
- |
code,kbd,pre,samp,tt {font-family:”Courier New”,Courier,monospace;} |
code,kbd,samp {font-family:”Courier New”,monospace;} |
1、pre只是对文本预格式化，并不代表内容一定是代码，所以没有必要为pre标签定义等宽字体，如果pre中为代码，应使用： <pre><code> … </code></pre> 2、HTML5已将tt标签“抛弃”； 结论：可只定义code、kbd、samp三个标签，或保留默认； |
|
14 |
- |
small {font-size:12px;} |
- |
1、KISSY指出小于12px的中文难于阅读，故使之正常化； 2、HTML5“抛弃”了big标签，却留着small，不知何故…… 结论：推荐不使用small标签，从Reset做起； |
|
15 |
- |
hr {border:none;height:1px;} |
hr {border:none;height:1px;} |
1、hr默认：border:1px inset，height为2； 2、hr颜色在FF下由background-color定义、在IE下由color定义，故：请在实际使用中将两个属性都写上； 3、hr的盒模型在IE/FF下与在Chrome下不同，不推荐使用； |
|
16 |
- |
body, button,input,select,textarea {font:12px/1 Tahoma,Helvetica,Arial,”\5b8b\4f53″,sans-serif;} |
body, button,input,select,textarea {font:12px/1 Arial,Tahoma,Helvetica,SimSun,san-serif;} |
1、小于12px的中文难于阅读； 2、在12px字体下小于12px的行高，文字会有重叠； 3、与字体大小相同的行高可避免不同浏览器对行高的解析差异，从而避免对齐问题，对具体文本内容再单独定义行高更合适； 4、表单元素在IE6下不继承，需单独设置字体样式； 5、KISSY对“宋体”二字使用ASCII码“\5b8b\4f53”表示，防止文本编码不同出现样式定义问题； 我在此推荐使用字体的英文表示方法（注意字体名有空格时要用引号括住），更加易读，如： 宋体：SimSun、 黑体：SimHei、 新宋体：NSimSun、 仿宋：FangSong、 楷体：KaiTi、 仿宋_GB2312：FangSong_GB2312、 楷体_GB2312：KaiTi_GB2312、 微软雅黑体：Microsoft YaHei； |
|
17 |
- |
a{text-decoration:none;} a:hover{text-decoration:underline;} |
- |
因为链接样式在具体页面表现各不相同，我倾向于不在Reset中重置，而在实际项目中定义； |
|
18 |
- |
html {overflow-y:scroll;} |
- |
1、在FF等非IE浏览器下，如果页面内容不满一屏时，默认是没有纵向滚动条的，增加此滚动条可以布局时更准确； 2、在设计时可以添加此属性，但发布时建议将它去除； |
