不同浏览器对各个元素的margin,padding,border,font等属性的定义各有不同,不同浏览器的显示效果可能不一样,为了杜绝这种情况,通过CSS强制让所有元素的属性值都一样。
主要需要初始化的样式
1.块元素,由于不同浏览器对各个元素的margin,padding,等属性的定义各有不同,为了兼容性的问题,我们需要将块级元素的margin和padding设置为0;
例如:
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;padding: 0;}
2.表单元素,对字体的样式进行统一
例如:
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
button,input,select,textarea{font-size:100%;outline:none}
3.a标签,将a标签的下划线去掉
例如:
a{text-decoration:none}
a:hover{text-decoration:underline}
4.em b等元素进行字体样式改正
例如:
em,b{font-style:normal}
5.列表元素,将列表元素的样式去掉
例如:
td,th,ul,ol{padding:0;list-style: none;}
6.img元素
img{border:0;display: block;}
7.table元素
table{border-collapse:collapse;border-spacing:0}
腾讯qq官网的初始化页面
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}