前言

Normalize-zh.css是根据对Normalize.css的源码分析后，经过学习与整理，将源代码中的英文注释文档翻译为中文版本，方便国内的开发者学习和使用，我深知此版本一定有很多不足，希望能得到大家的理解和支持，同样也很愿意和大家一起完善。

关于源码的解读细节，可以查看文档下方，可以阅读我发布在segmentfault上的系列文章

  1. /**
  2.  * 1. Set default font family to sans-serif.
  3.  * 2. Prevent iOS and IE text size adjust after device orientation change,
  4.  *    without disabling user zoom.
  5.  */
  6. html {
  7.   font-family: sans-serif; /* 1 */
  8.   -ms-text-size-adjust: 100%; /* 2 */
  9.   -webkit-text-size-adjust: 100%; /* 2 */
  10. }
    - 设置全局的字体为sans-serif，关于中文字体的设置可参考 [Amaze UI](http://www.w3cfuns.com/topic-12.html) - 防止 iOS 横屏字号放大，同时保证在PC上 zoom 功能正常
第2个问题场景是这样，苹果IOS设备调整后会自动调整文字的大小，按照苹果的意图是为了提升用户体验，比如竖屏状态下是14px，转换为横屏时就变成了20px，把text-size-adjust:100%就不会调整字体大小了。 如果把值设置为'text-size-adjust:none'，那么就会导致用户无法放大缩小字体了。 
  1. /**
  2.  * Remove default margin.
  3.  */
  5. body {
  6.   margin: 0;
  7. }
  • 修复浏览器默认边距，统一效果

    HTML5 元素 display definitions

  1. /**
  2.  * Correct `block` display not defined for any HTML5 element in IE 8/9.
  3.  * Correct `block` display not defined for `details` or `summary` in IE 10/11
  4.  * and Firefox.
  5.  * Correct `block` display not defined for `main` in IE 11.
  6.  */
  8. article,
  9. aside,
  10. details,
  11. figcaption,
  12. figure,
  13. footer,
  14. header,
  15. hgroup,
  16. main,
  17. menu,
  18. nav,
  19. section,
  20. summary {
  21.   display: block;
  22. }
  • 修复 IE 8/9，HTML5新元素不能正确显示的问题，定义为block的元素
  • 修复 IE 10/11，details 和 summary 定义为 block 的元素
  • 修复 IE 11，main定义为 block 的元素
    这个问题想必大家都已经非常清楚，当低版本浏览器遇到不识别的元素时，会默认把他们当成内联元素(inline)，这里重新定义成为block元素。
  1. /**
  2.  * 1. Correct `inline-block` display not defined in IE 8/9.
  3.  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  4.  */
  6. audio,
  7. canvas,
  8. progress,
  9. video {
  10.   display: inline-block; /* 1 */
  11.   vertical-align: baseline; /* 2 */
  12. }
    - 修复 IE 8/9，HTML5新元素不能正确显示的问题，定义为inline-block元素 - 修复Chrome, Firefox, 和Opera的progress元素没有以baseline垂直对齐
progress是HTML5的新标签，可以定义进度条，但是它Chrome, Firefox, 和Opera并没有已baseline垂直对齐。 
  1. /**
  2.  * Prevent modern browsers from displaying `audio` without controls.
  3.  * Remove excess height in iOS 5 devices.
  4.  */
  5. audio:not([controls]) {
  6.   display: none;
  7.   height: 0;
  8. }
  • 对不支持controls属性的浏览器，audio元素给以隐藏
  • 移除iOS5设备中多余的高度
    在IE8之前的浏览器是不支持controls属性，这里的办法是直接隐藏该元素
  1. /**
  2.  * Address `[hidden]` styling not present in IE 8/9/10.
  3.  * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
  4.  */
  6. [hidden],
  7. template {
  8.   display: none;
  9. }
  • 修复 IE 7/8/9，Firefox 3 和 Safari 4 中hidden属性不起作用的问题
  • 在 IE，Safari，Firefox 22- 中隐藏template元素
    template标签用于HTML模板，大家应该都是用过HTML模版开发页面，这个标签是按照实际需求添加的，但是模板又不能在界面上显示，所以这里统一了样式，兼容旧浏览器。

链接 Links

  1. /**
  2.  * Remove the gray background color from active links in IE 10.
  3.  */
  5. a {
  6.   background-color: transparent;
  7. }
  • 去掉 IE 10+ 点击链接时的灰色背景
    1. /**
        • Improve readability of focused elements when they are also in an
        • active/hover state.
          */

    a:active,
    a:hover {
    outline: 0;
    }

    • 去掉点击时的outline焦点框，同时保证使用键盘可以显示焦点框，这个操作针对所有浏览器

      语义化文本标签 Text-level semantics

    1. /**
    2.  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
    3.  */
    5. abbr[title] {
    6.   border-bottom: 1px dotted;
    7. }
    • 修正abbr元素在 Firefox 外其他浏览器没有下划线的问题
      语义abbr标签是表示简称或缩写，自身的title属性是完整版，但是此标签在Firefox下默认有下边框，而其他浏览器中没有，这里统一了样式。
    1. /**
    2.  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
    3.  */
    5. b,
    6. strong {
    7.   font-weight: bold;
    8. }
    • Firefox3+，Safari4/5 和 Chrome 中统一设置为粗体
      Firefox 3+, Safari 和 Chrome 给b和strong设置的属性是bolder，而不是bold，这里统一了样式。
    1. /**
    2.  * Address styling not present in Safari and Chrome.
    3.  */
    5. dfn {
    6.   font-style: italic;
    7. }
    • 修正 Safari5 和 Chrome 中没有样式的问题
      dfn 标签可标记那些对特殊术语或短语的定义，在Safari 和Chrome 里不是斜体，在这里统一了样式。
    1. /**
    2.  * Address variable `h1` font-size and margin within `section` and `article`
    3.  * contexts in Firefox 4+, Safari, and Chrome.
    4.  */
    6. h1 {
    7.   font-size: 2em;
    8.   margin: 0.67em 0;
    9. }
    • 修复 Firefox 4+，Safari 5 和 Chrome 中section和article内的h1字体大小
      1. /**
          • Address styling not present in IE 8/9.
            */

      mark {
      background: #ff0;
      color: #000;
      }

      • 修复 IE 6/9， Safari 5 和 Chrome中样式不呈现的问题
        mark标签用来突出显示部分文本，设置后会有一个高亮背景，但是此标签是HTML5中的新标签，在低版本浏览器并不识别，所以需要重置样式。
      2. /**
      3.  * Address inconsistent and variable font size in all browsers.
      4.  */
      6. small {
      7.   font-size: 80%;
      8. }
      • 在所有浏览器中统一small的字体大小
        small标签在 HTML 4.01 就已经存在，HTML5 中增强了它的寓意，表示旁注信息，不过此标签在各个浏览器中呈现的字体大小不一样，在这里做了统一
      1. /**
      2.  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
      3.  */
      5. sub,
      6. sup {
      7.   font-size: 75%;
      8.   line-height: 0;
      9.   position: relative;
      10.   vertical-align: baseline;
      11. }
      13. sup {
      14.   top: -0.5em;
      15. }
      17. sub {
      18.   bottom: -0.25em;
      19. }
      • 防止所有浏览器中的sub和sup影响行高
        sup和sub两个标签是用来表示上标和下标，据HTML标准中对small，sub和sup的大小要求都是smaller，但是如上所示normalize.css给small设的是80%，而sub和sup却是75%，所以为了保持一致，且不影响其他元素的行高，把两者的line-height设为0，然后设置它的垂直以baseline开始，设置top和bottom手动设置两者偏移量

      内嵌元素 Embedded content

      1. /**
      2.  * Remove border when inside `a` element in IE 8/9/10.
      3.  */
      5. img {
      6.   border: 0;
      7. }
      • 去除 IE6-9 和 Firefox 3 中a内部img元素默认的边框
        在旧版本的浏览器中，图片默认会有一个奇丑无比的蓝色边框，这这里进行清除，统一样式。
      1. /**
      2.  * Correct overflow not hidden in IE 9/10/11.
      3.  */
      5. svg:not(:root) {
      6.   overflow: hidden;
      7. }
      • 修复 IE9 中的overflow的怪异表现

        群组元素 Grouping content

      1. /**
      2.  * Address margin not present in IE 8/9 and Safari.
      3.  */
      5. figure {
      6.   margin: 1em 40px;
      7. }
      • 修复 IE 8/9、Safari中margin失效
        figure 是HTML5的新标签，用做文档插图，但它在 IE 8/9 and Safari 中的默认margin失效，这里做了统一设置。
      1. /**
      2.  * Address differences between Firefox and other browsers.
      3.  */
      5. hr {
      6.   box-sizing: content-box;
      7.   height: 0;
      8. }
      • 修正 Firefox 和其他浏览器之间的差异
        在 Firefox 中，hr元素的默认样式很多，和其它浏览器主要的差异有两点：1.设置了height为2px;2.box-sizing为border-box;此样式对这两个问题进行重置，进行统一
      1. /**
      2.  * Contain overflow in all browsers.
      3.  */
      5. pre {
      6.   overflow: auto;
      7. }
      • 标签设置滚动条，内容溢出时出现
        大部分浏览器的pre在overflow的时候会直接溢出去，这里加上overflow:auto让它出现滚动条
      1. /**
      2.  * Address odd `em`-unit font size rendering in all browsers.
      3.  */
      5. code,
      6. kbd,
      7. pre,
      8. samp {
      9.   font-family: monospace, monospace;
      10.   font-size: 1em;
      11. }
      • 用于修复 Safari 5 和 Chrome 中奇怪的字体设置，统一字体样式

        表单 Forms

      1. /**
      2.  * 1. Correct color not being inherited.
      3.  *    Known issue: affects color of disabled elements.
      4.  * 2. Correct font properties not being inherited.
      5.  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
      6.  */
      8. button,
      9. input,
      10. optgroup,
      11. select,
      12. textarea {
      13.   color: inherit; /* 1 */
      14.   font: inherit; /* 2 */
      15.   margin: 0; /* 3 */
      16. }
        - 修正所有浏览器中颜色不继承的问题 - 修正所有浏览器中字体不继承的问题 - 修正 Firefox 3+， Safari5 和 Chrome 中外边距不同的问题
      有一些浏览器会把form表单中的一些元素 textarea，text，button，select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体，并不会从父元素继承，所以这里重置了这些元素的默认样式。 
      1. /**
      2.  * Address `overflow` set to `hidden` in IE 8/9/10/11.
      3.  */
      5. button {
      6.   overflow: visible;
      7. }
      • 统一 IE 8/9/10/11 overflow属性为visible
        在 IE 8/9/10/11里的button默认的overflow是hidden，这里统一为visible
      1. /**
      2.  * Address inconsistent `text-transform` inheritance for `button` and `select`.
      3.  * All other form control elements do not inherit `text-transform` values.
      4.  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
      5.  * Correct `select` style inheritance in Firefox.
      6.  */
      8. button,
      9. select {
      10.   text-transform: none;
      11. }
      • 统一各浏览器text-transform不会继承的问题
        1. /**
                1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native audio
              • and video controls.
                  1. Correct inability to style clickable input types in iOS.
                    1. Improve usability and consistency of cursor style between image-type
                  • input and others.
                    */

              button,
              html input[type="button"], / 1 /
              input[type="reset"],
              input[type="submit"] {
              -webkit-appearance: button; / 2 /
              cursor: pointer; / 3 /
              }

                • 避免 Android 4.0.* 中的 WebKit bug ，该bug会破坏原生的audio和video的控制器
                • 更正 iOS 中无法设置可点击的input的问题
                • 统一其他类型的input的光标样式

              这里将可点击的按钮，统一设置鼠标样式为pointer，提高了可用性 
              1. /**
              2.  * Re-set default cursor for disabled elements.
              3.  */
              5. button[disabled],
              6. html input[disabled] {
              7.   cursor: default;
              8. }
              • 重置按钮禁用时光标样式
                1. /**
                    • Remove inner padding and border in Firefox 4+.
                      */

                button::-moz-focus-inner,
                input::-moz-focus-inner {
                border: 0;
                padding: 0;
                }

                • 移除 Firefox 4+ 的内边距
                  1. /**
                      • Address Firefox 4+ setting line-height on input using !important in
                      • the UA stylesheet.
                        */

                  input {
                  line-height: normal;
                  }

                  • 统一设置行高为normal
                    Firefox浏览器会默认设置input[type="button"]的行高为normal !important，这里统一样式
                  1. /**
                  2.  * It's recommended that you don't attempt to style these elements.
                  3.  * Firefox's implementation doesn't respect box-sizing, padding, or width.
                  4.  *
                  5.  * 1. Address box sizing set to `content-box` in IE 8/9/10.
                  6.  * 2. Remove excess padding in IE 8/9/10.
                  7.  */
                  9. input[type="checkbox"],
                  10. input[type="radio"] {
                  11.   box-sizing: border-box; /* 1 */
                  12.   padding: 0; /* 2 */
                  13. }
                    - 修正 IE 8/9 box-sizing 被设置为content-box的问题 - 移除 IE 8/9 中多余的内边距
                  1. /**
                  2.  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
                  3.  * `font-size` values of the `input`, it causes the cursor style of the
                  4.  * decrement button to change from `default` to `text`.
                  5.  */
                  7. input[type="number"]::-webkit-inner-spin-button,
                  8. input[type="number"]::-webkit-outer-spin-button {
                  9.   height: auto;
                  10. }
                  • 修正 Chrome 中 input [type="number"] 在特定高度和 font-size 时,下面一个箭头光标变成cursor: text 效果
                    1. /**
                            1. Address appearance set to searchfield in Safari and Chrome.
                              1. Address box-sizing set to border-box in Safari and Chrome.
                                */

                        input[type="search"] {
                        -webkit-appearance: textfield; / 1 /
                        box-sizing: content-box; / 2 /
                        }

                          • 修正 Safari 5 和 Chrome 中appearance被设置为searchfield的问题
                          • 修正 Safari 5 和 Chrome 中box-sizing被设置为border-box的问题

                        searchfield是CSS3的属性，它可以让一个div元素看上去像任何元素，但是浏览器支持性并不好， 
                        1. /**
                        2.  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
                        3.  * Safari (but not Chrome) clips the cancel button when the search input has
                        4.  * padding (and `textfield` appearance).
                        5.  */
                        7. input[type="search"]::-webkit-search-cancel-button,
                        8. input[type="search"]::-webkit-search-decoration {
                        9.   -webkit-appearance: none;
                        10. }
                        • 移除原生默认样式，统一search的输入框样式
                          1. /**
                              • Define consistent border, margin, and padding.
                                */

                          fieldset {
                          border: 1px solid #c0c0c0;
                          margin: 0 2px;
                          padding: 0.35em 0.625em 0.75em;
                          }

                          • 定义一致的边框、外边距和内边距
                            1. /**
                                    1. Correct color not being inherited in IE 8/9/10/11.
                                      1. Remove padding so people aren't caught out if they zero out fieldsets.
                                        */

                                legend {
                                border: 0; / 1 /
                                padding: 0; / 2 /
                                }

                                  • 修正 IE 6-9 中颜色不能继承的问题
                                  • 重置内边距

                                1. /**
                                    • Remove default vertical scrollbar in IE 8/9/10/11.
                                      */
                                  • textarea {
                                      overflow: auto;
                                    }

                                  • 移除 IE8-11 中默认的垂直滚动条
                                    1. /**
                                        • Don't inherit the font-weight (applied by a rule above).
                                        • NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
                                          */

                                    optgroup {
                                    font-weight: bold;
                                    }

                                    • 统一设置optgroup元素font-weight始终为bold

                                      表格 Tables

                                    1. /**
                                    2.  * Remove most spacing between table cells.
                                    3.  */
                                    5. table {
                                    6.   border-collapse: collapse;
                                    7.   border-spacing: 0;
                                    8. }
                                    10. td,
                                    11. th {
                                    12.   padding: 0;
                                    13. }
                                    • 合并单元格边框，重置内边距

                                    原文:

                                    https://github.com/Alsiso/normalize-zh