现在的位置: 首页 ＞CSS＞正文
屡试不爽的Eric Meyer’s CSS Reset 完美的兼容从全局重置开始
发表于416 天前 ⁄ CSS ⁄ 评论数 1

说起CSS2.0的样式，做兼容很多人所需要面临的问题，因为margin、padding等属性初始值随着不同内核的浏览器而不同，通常我们做样式兼容的浏览器主要分IE内核浏览器（包括IE，以及360浏览器、搜狗浏览器、TT浏览器等以IE为内核的浏览器）、非IE内核(如FireFox、Opera、Chrome等)。正因为浏览器的初始值的差异，所以在写CSS2.0代码的第一步就是全局重置样式，完美的兼容从全局重置开始。

屡试不爽的Eric Meyer’s CSS Reset 完美的兼容从全局重置开始

这可以简单到仅仅将所有元素中的margin和padding属性去掉:

  1. html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
  2. pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

目前应用比较普遍的全局重置样式有Eric Meyer和YUI的Resets两种样式是很棒的，另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是，Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。但同时，糟糕的是，网上流传的比较广的(尤其是国内)都不是最新的版本。本文上面两个链接的页面里直接看到的都不是最新的(Eric Meyer’s CSS Reset最新版本的请查看本文结尾处)，Eric专门为有一个reset.css页面。

但对我来说，它们走的太远了。我想要你清除所有东西，然后再重新定义元素的许多属性。这就是Eric Meyer所推荐的。如果有更有效的方法是用它的话，你不应该只是拿来他的样式文件，将它直接放到自己的项目中——提炼它，在它的基础上重建，把它变成你自己的。

一个蛋疼的全局重置，在网上发现很多野鸡培训机构，培训样式竟然用这个做全局重置。

* { margin: 0; padding: 0; }

哦，请不要这样写重置，如果把一个单选框的padding去掉，你觉得会发生什么事情？这问题太多了，在此不多加表述，到时候做整站兼容，兼到你哭为止。

下面直接说一下早期Eric Meyer’s CSS Reset ，屡试不爽的全局重置样式。

下载: reset.css
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. dl, dt, dd, ol, ul, li,
  7. fieldset, form, label, legend,
  8. table, caption, tbody, tfoot, thead, tr, th, td {
  9.     margin: 0;
  10.     padding: 0;
  11.     border: 0;
  12.     outline: 0;
  13.     font-weight: inherit;
  14.     font-style: inherit;
  15.     font-size: 100%;
  16.     font-family: inherit;
  17.     vertical-align: baseline;
  18. }
  19. /* remember to define focus styles! */
  20. :focus {
  21.     outline: 0;
  22. }
  23. body {
  24.     line-height: 1;
  25.     color: black;
  26.     background: white;
  27. }
  28. ol, ul {
  29.     list-style: none;
  30. }
  31. /* tables still need 'cellspacing="0"' in the markup */
  32. table {
  33.     border-collapse: separate;
  34.     border-spacing: 0;
  35. }
  36. caption, th, td {
  37.     text-align: left;
  38.     font-weight: normal;
  39. }
  40. blockquote:before, blockquote:after,
  41. q:before, q:after {
  42.     content: "";
  43. }
  44. blockquote, q {
  45.     quotes: "" "";
  46. }

原文：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded

今年，Eric Meyer又思考了一下reset.css的问题，于是有所更新，具体为何要这样做，请看原文Reset Revisited。注意最开始的那句
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON
使用需谨慎！

下载: reset.css
  1. /* http://meyerweb.com/eric/tools/css/reset/
  2.    v2.0b1 | 201101
  3.    NOTE: WORK IN PROGRESS 
  4.    USE WITH CAUTION AND TEST WITH ABANDON */
  5.  
  6. html, body, div, span, applet, object, iframe,
  7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  8. a, abbr, acronym, address, big, cite, code,
  9. del, dfn, em, img, ins, kbd, q, s, samp,
  10. small, strike, strong, sub, sup, tt, var,
  11. b, u, i, center,
  12. dl, dt, dd, ol, ul, li,
  13. fieldset, form, label, legend,
  14. table, caption, tbody, tfoot, thead, tr, th, td,
  15. article, aside, canvas, details, figcaption, figure,
  16. footer, header, hgroup, menu, nav, section, summary,
  17. time, mark, audio, video { 
  18.     margin: 0;
  19.     padding: 0;
  20.     border: 0;
  21.     outline: 0;
  22.     font-size: 100%;
  23.     font: inherit;
  24.     vertical-align: baseline;
  25. } 
  26. /* HTML5 display-role reset for older browsers */
  27. article, aside, details, figcaption, figure,
  28. footer, header, hgroup, menu, nav, section { 
  29.     display: block;
  30. } 
  31. body { 
  32.     line-height: 1;
  33. } 
  34. ol, ul { 
  35.     list-style: none;
  36. } 
  37. blockquote, q { 
  38.     quotes: none;
  39. } 
  40. blockquote:before, blockquote:after,
  41. q:before, q:after { 
  42.     content: '';
  43.     content: none;
  44. } 
  45.  
  46. /* remember to define visible focus styles!
  47. :focus { 
  48.     outline: ?????;
  49. } */
  50.  
  51. /* remember to highlight inserts somehow! */
  52. ins { 
  53.     text-decoration: none;
  54. } 
  55. del { 
  56.     text-decoration: line-through;
  57. } 
  58.  
  59. table { 
  60.     border-collapse: collapse;
  61.     border-spacing: 0;
  62. }

有关:Focus补充说明：
简单的这观点，这观点相当普遍。尽管我个人认为Eric Meyer将reset.css中的”:focus”移除的确是使页面更美观，但我想保留焦点的边框才是正道，因为有部分用户是使用键盘来点击链接的，而非鼠标。

有关:focus属性重置的问题，就看代码编写者取舍，为了让代码兼容Opera浏览器，代码编写上花了较长的时间。这是因为Opera浏览器中根本就没有类似:focus这样的不标签。不管怎么说，假如你希望你的链接看起来更简洁一点，你可以将text.css中的a:focus去掉，同时你要知道你的操作将会使你设计牺牲了网页的到达无障碍性。

原文：http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

日志分页: 1 2 3

固定链接: 屡试不爽的Eric Meyer’s CSS Reset 完美的兼容从全局重置开始 | 天空青年 +复制链接

作者: NowIt

该日志由 NowIt 于2011年03月31日发表在CSS分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 屡试不爽的Eric Meyer’s CSS Reset 完美的兼容从全局重置开始 | 天空青年
关键字: , , , ,
【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 为HTML5的未来制定学习计划
  2. div+css不得不看的15个css注意事项
  3. 艺术与web：线
  4. 40个UI设计工具和资源
  5. 搞定IE样式兼容技巧 CSS Bug Table
    为HTML5的未来制定学习计划
    Estaque
    搞定IE样式兼容技巧 CSS Bug Table
    40个UI设计工具和资源

屡试不爽的Eric Meyer’s CSS Reset 完美的兼容从全局重置开始：目前有1 条留言

  1. zhou45 : 2011年12月04日22:17

    不错哦，收藏了。

给我留言

/ 快捷键：Ctrl+Enter

返回首页

Copyright © 2010-2012  遵循知识共享署名-相同方式共享 2.5知识共享许可协议
天空青年基于WordPress技术创建   Theme by Robin   96次查询