使用normalize.css遇到的问题？

Question

使用normalize.css代替reset.css但在使用中浏览器会有一些默认样式，比如说
ul会有默认的内边距，dd也会有默认的内边距。自己还得手动的清除，那么和reset.css
比起来，normalize.css优势怎样体现呢？

Answer 1

reset.css样式重置会让各个浏览器的CSS样式保持一个基准，而这个基准就是“归零”。
但它归零的思想过于暴力，宁可错杀一千，也不放过一个要清零的元素，其实很多设置都是画蛇添足
取一段reset.css的代码

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
code, form, fieldset, legend, input, button, textarea, p, 
blockquote, th, td { 
    margin: 0;
    padding: 0; 
}

1. div,li标签默认是没有margin,padding值，但是还是被设置{margin:0; padding:0;}属性
2. dt标签的margin,padding默认值就是0，但这里又被设置了一次{margin:0; padding:0;}
3. code标签属于inline行内元素，是不能设置{margin:0; padding:0;}
   ....

我们再来看一段

address,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}

这个设置往往在开发中有很多潜在的问题，单从用户体验上讲一个例子：
假设你的页面上有一个可编辑内容区域，用户设置了一个strong效果，但发现它却没有任何的反应，用户就会产生的疑惑，为什么我加粗了却没有反应？

或许，你都不知道它已经被暴力的清0了。

---

normalize.css 帮你合理重置掉可能产生问题的样式，坚持保留部分浏览器的基础样式，解决一些潜在的问题，做到真正合理的浏览器样式初始化。(想你所想，给你所要...)

Answer 2

为什么要清除呢？

如果你做了一个cms系统，或者博客系统，论坛系统，当用户在富文本编辑器里面输入列表时，看到的也是有缩进的，结果点击提交后，再一看效果，肯定得抓狂。

所以，normalize.css 只是把标签的表现形式统一了。让所有的浏览器都按照一个样式。

而reset.css呢？太疯狂了？ 把所有的标签都变成了 div 了。

你写个 li，本来应该是个列表，结果表现出的样式和 div 一样。那我还不如写 div 呢！！

你写个 dd，本来是名词解释用的，结果表现出的样式和 div 一样。那我还不如写 div 呢！！

你写个 h3，本来是3号标题，结果表现出的样式和 div 一样。那我还不如写 div 呢！！

---

你写个 ul li，在 ie 里面，可能是3像素。在ff里面，4像素。chrome里面，5像素。IE使用padding，而ff使用margin。（打个比喻）

reset.css方式，太激进了。过头了。直接把所有的浏览器默认样式都去掉了。

normalize.css好，列表依然是列表，只是把所有的浏览器中样式都变成了 3像素，margin-left（这又是一个比喻）。

Answer 3

• reset.css 的作用是清除所有的默认样式
• normalize.css 是把所有的元素样式回归本该是的样子，并且消除了不同浏览器之间默认样式的区别。

以上是两者的区别。

Answer 4

reset.css和normalize.css两个是不用

reset.css 是将所有的浏览器样式都统一，并清楚所有标签的默认样式，统一成自己想要的样式
normalize.css 也是将所有的浏览器样式统一，但是保留了标签的默认样式，比如： strong表示粗体，i 表示斜体，ul默认是有点...等等之类的

Answer 5

其实说白了，都是一样的东西……
都是对浏览器的默认样式做一些设置，然后方便后期自己对样式做处理。

这个你自己也可以针对自己的项目做一些reset之类的处理，下面这个是我之前整理后给自己用的，如果有兴趣的话，可以参考一下：http://linxz.github.io/tianyizone/css_reset.html