一.重置的理由
当今流行的浏览器中,有些都是以自己的方式去理解css规范,这就会到只有的浏览器对css的解释与设计师的css定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示.,但是有些浏览器却没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题
所以,通过重置button标签的css属性,然后再将它统一定义,就可以产生相同的显示效果
css reset的作用就是让各个浏览器的css样式有一个统一的基准,而这个基准更多的就是"清零"!
以下是一整段的css reset的样式重置信息展示:
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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:;
padding:;
border:;
outline:;
font-size:100%;
vertical-align:baseline;
background:transparent;
} body {
line-height:;
} :focus {
outline:;
} article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
} nav ul {
list-style:none;
} blockquote, q {
quotes:none;
} blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
} a {
margin:;
padding:;
border:;
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:;
} hr {
display:block;
height:1px;
border:;
border-top:1px solid #cccccc;
margin:1em 0;
padding:;
} input, select {
vertical-align:middle;
}
对于上述的代码,我做以下的几点说明:
1.该部分是对于浏览器部分的css进行重置,个人认为并非所有的代码都是需要如此的操作出来,毕竟其中含有的很多标签在你写页面的过程中不一定会用到
2.根据自己的实际的情况选择适合自己的代码来使用,不要 照抄,这是前辈们总结出来的经验
以上代码也可以简化成下面的代码形式:
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{
margin:;
}
ol,ul{
margin:;
padding:;
}
根据实际的情况合理的使用相关的reset的代码,因为如果你的css文件本身就比较大的话,增加相关的reset代码也会使得你的css文件变得更大点,对于公司来说,这点是不可取!!!