去掉浏览器默认样式“user agent stylesheet”的解决方法

今天用F12在调试css的时候，发现了有很多的样式是如下图这样显示的：

user agent stylesheet

中文翻译

用户代理样式表

原因：

user agent stylesheet是浏览器自动加上的格式，user agent stylesheet将被你在自己的css中设置的任何内容覆盖。它们只是最底层：在没有页面或用户提供的任何css的情况下，浏览器仍然必须以某种方式呈现内容，而css只是描述了这一点。

因此，如果你认为css存在问题，那么你的HTML或css或两者（您没有写任何内容）确实存在问题。

解决方法

第一种方法：

由于 user agent stylesheet 的优先级很低，自己写样式覆盖即可。在你的css中添加被user agent stylesheet所覆盖了的样式，例如，我这可以重新定义div的样式：

div{
    display: inline-block;
}

第二种方法：

写reset.css或者normalize.css；

目的：减少浏览器在默认行高，边距和标题字体大小等方面的不一致性。

具体也可参考：css初始化代码大全

reset.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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

总结：

我依然还是推荐大家用第二种方法，为了各种浏览器的兼容性，尽量去用CSS初始化代码吧！