浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表，即user agent stylesheet，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。这才带来了很多的坑，让大家用cssreset去填。。

一、浏览器默认样式

了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数，对我们了解浏览器的差异，写各浏览器兼容的代码也有很大帮助。

所以先看看浏览器默认样式长什么样：

FF下的浏览器默认样式可以通过：resource://gre-resources/html.css来查看。

不同浏览器的默认样式可能不同，点我查看各个浏览器的默认样式。

二、HTML4默认样式

掌握html标签的css属性的默认值，可以让我们不管是在重置样式还是在自定义样式的时候都更加游刃有余。

w3官网上有一份HTML4默认样式的附录，点我查看。同时有一句话说：This appendix is informative,not normative。

这只是一份资料性的附录，而非规范性附录，可能也不适合作为规范或标准。但是浏览器何其多，个人觉得可以以此作为切入点了解默认样式。并且这份样式是基于对现有UA的大量调查而得到的，描述了所有html4元素的典型的排版。

@charset "gb2312";
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, button, input, select, textarea {
font: 12px "microsoft yahei";
line-height: 1.5;
-ms-overflow-style: scrollbar
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%
}
ul, ol {
list-style: none
}
a {
text-decoration: none;
cursor:pointer
}
a:hover {
text-decoration: underline
}
img {
border: 0
}
button, input, select, textarea {
font-size: 100%
}
table {
border-collapse: collapse;
border-spacing: 0
}

.clear {
clear:both
}
.fr {
float:right
}
.fl {
float:left
}
.block {
display:block;
text-indent:-999em
}

View Code
pptv前端cssreset

@charset "utf-8";
body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,button,textarea,table,tbody,tfoot,thead,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;outline:0;background:transparent;}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}body,button,input,select,textarea{font:12px/1.5 arial,\5b8b\4f53,sans-serif;}h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol,li{list-style:none;}img{border:none;}a{text-decoration:none;outline:thin none;}a:hover{text-decoration:underline;}table{border-collapse:collapse;border-spacing:0;}.clear{clear:both;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}html{-webkit-text-size-adjust: none;}
body{font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;}

四、使用normalize跨浏览器

使用Normalize.css也是个比较好的选择，给出几个链接。

来，让我们谈一谈Normalize.css

about normalize

Normalize.css项目地址

五、资源链接

W3C的HTML4默认样式表http://www.w3.org/TR/CSS21/sample.html

w3cfuns的各个版本浏览器默认css样式表http://www.w3cfuns.com/topic-12.html

浏览器默认样式对比http://developer.doyoe.com/default-style/

cssreset参考http://cssreset.com/

IE6~9浏览器默认样式http://www.iecss.com/

Firefox的默认样式http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css

WebKit的默认样式http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

浏览器兼容的hackhttp://browserhacks.com/

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：/article/5239277.html有问题欢迎与我讨论，共同进步。