目前比较全的CSS重设(reset)方法总结

[ 2014-01-16 14:55:59 | 作者: admin ]

字号: 大 | 中 | 小

　在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

　　当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

　　正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

　　今天暴风彬彬总结收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

　　彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

一.最简化的CSS Reset(重设) :

* {
   outline: 0;
   padding: 0;
   margin: 0;
   border: 0;
}

二.浓缩实用型CSS Reset(重设):

* {
   vertical-align: baseline;
   font-weight: inherit;
   font-family: inherit;
   font-style: inherit;
   font-size: 100%;
   outline: 0;
   padding: 0;
   margin: 0;
   border: 0;
}

三.Poor Man 的CSS Reset:

html, body {
   padding: 0;
   margin: 0;
}
html {
   font-size:1em;
}
body {
   font-size:100%;
}
a img, :link img, :visited img {
   border:0px;
}

这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

* {
   vertical-align: baseline;
   font-family: inherit;
   fo

nt-style: inherit;
   font-size: 100%;
   border: none;
   padding: 0;
   margin: 0;
}
body {
   padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
   margin: 20px 0;
}
li, dd, blockquote {
   margin-left: 40px;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

http://blog.bingo929.com/css-reset-collection.html