目前比较全的目前比较全的CSS reset重设方法总结重设方法总结
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键,然而现实中发生
的情况却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现
在当今网页设计/开发实践中,使用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,这样就
能避免发生这种问题。
一.最简化的CSS Reset(重设) :
CSS Code复制内容到剪贴板
1. * {
2. padding: 0;
3. margin: 0;
4. }
这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认
值上的”分歧”。
CSS Code复制内容到剪贴板
1. * {
2. padding: 0;
3. margin: 0;
4. border: 0;
5. }
这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。
CSS Code复制内容到剪贴板
1. * {
2. outline: 0;
3. padding: 0;
4. margin: 0;
5. border: 0;
6. }
在前两个的基础上添加了outline属性的重设,防止一些冲突。
二二.浓缩实用型浓缩实用型CSS Reset(重设重设):
CSS Code复制内容到剪贴板
1. * {
2. vertical-align: baselinebaseline;
3. font-weight: inherit;
4. font-family: inherit;
5. font-style: inherit;
6. font-size: 100%;
7. outline: 0;
8. padding: 0;
9. margin: 0;
10. border: 0;