版本v5.0.0源码地址:


https://necolas.github.io/normalize.css/5.0.0/normalize.css

翻译版:


/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. 更改所有浏览器中的默认字体系列(意见)。
 * 2. 更正所有浏览器中的行高。
 * 3. 在Windows Phone的IE或者ios上方向更改后,防止字体大小的调整。
 */

/* 文档
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* 部分
   ========================================================================== */

/**
 * 删除所有浏览器的边距 (意见).
 */

body {
  margin:;
}

/**
 * 更正IE9以下的display
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * 更正Chrome,Firefox和Safari 中`section`和*`article`上下文中`h1`元素的字体大小和边距。
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* 分组内容
   ========================================================================== */

/**
 * 在IE9-添加正确的display.
 * 1.在IE中添加正确的display.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * 在IE8中添加正确的margin.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. 在firefox中添加正确的box sizing.
 * 2. 在 Edge and IE中显示overflow.
 */

hr {
  box-sizing: content-box; /* 1 */
  height:; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. 更正所有浏览器中字体的大小的继承和缩放.
 * 2. 更正所有浏览器中`em`字体大小.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* 文本级语义
   ========================================================================== */

/**
 * 1. 删除IE10中active link上的灰色背景.
 * 2. 删除链接下划线在iOS 8+和Safari 8+中的差距。
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 删除聚焦链接上的轮廓,即当他们是active或hover时(意见).
 */

a:active,
a:hover {
  outline-width:;
}

/**
 * 1. 删除Firefox 39-中的底部边框。
 * 2. 在Chrome,Edge,IE,Opera和Safari中添加正确的文字装饰。
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * 根据Safari 6中的下一个规则防止重复应用“bolder”。
 */

b,
strong {
  font-weight: inherit;
}

/**
 * 在Chrome,Edge和Safari中添加正确的font weight。
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. 纠正所有浏览器中字体大小的继承和缩放。
 * 2. 在所有浏览器中更正'em'字体大小
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * 在Android 4.3-中添加正确的字体样式。
 */

dfn {
  font-style: italic;
}

/**
 * 在 IE9- 中添加正确的背景和颜色。
 */

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

/**
 * 在所有浏览器中添加正确的字体大小。
 */

small {
  font-size: 80%;
}

/**
 * 所有浏览器中,防止`sub`和`sup`元素影响行高
 *
 */

sub,
sup {
  font-size: 75%;
  line-height:;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* 嵌入内容
   ========================================================================== */

/**
 * 在IE 9-中添加正确的display。
 */

audio,
video {
  display: inline-block;
}

/**
 * 在iOS 4-7中添加正确的display。
 */

audio:not([controls]) {
  display: none;
  height:;
}

/**
 * 删除IE 10中链接内图像上的边框。
 */

img {
  border-style: none;
}

/**
 * 隐藏IE中的overflow.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Form表单
   ========================================================================== */

/**
 * 1. 在所有浏览器中更改字体样式(意见)。
 * 2. 删除Firefox和Safari中的边距。
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin:; /* 2 */
}

/**
 * 在IE中显示overflow。
 * 1.在Edge显示overflow。
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * 删除Edge,Firefox和IE中的文本变换的继承。
 * 1.在Firefox中删除文本变换的继承。
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. 在Android 4防止WebKit的bug:销毁本机`audio`和`video`控件
 * 2. 纠正在iOS和Safari中无法创建可点击类型的样式。
 */

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

/**
 * 删除Firefox中的内边框和内边距。
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding:;
}

/**
 * 恢复上一个规则未设置的焦点样式。
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 更改所有浏览器中的边框,边距和填充(意见)。
 */

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

/**
 * 1.纠正在Edge和IE中的文本换行。
 * 2.纠正IE中'fieldset`元素的颜色继承。
 * 3.在所有浏览器中删除padding以便开发者在他们清零`fieldset`元素时不会出错。
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding:; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1.在IE9-中添加正确的display。
 * 2. 在Chrome,Firefox和Opera中添加正确的垂直对齐方式。
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * 删除IE中的默认垂直滚动条。
 */

textarea {
  overflow: auto;
}

/**
 * 1. 在IE 10-中添加正确的box sizing。
 * 2. 删除IE 10-中的padding。
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding:; /* 2 */
}

/**
 * 修正Chrome中增加和减少按钮的游标样式。
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1.纠正Chrome和Safari中的奇怪外观。
 * 2.更正Safari中的outline样式。
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * 在MacOS中删除Chrome和Safari中的内部padding和取消按钮。
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1.纠正了在iOS和Safari中无法创建可点击类型的样式。
 * 2.在Safari中将字体属性更改为`inherit`。
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* 互动
   ========================================================================== */

/*
 * 在IE 9-中添加正确的display。
 * 1.在Edge,IE和Firefox中添加正确的display。
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * 在所有浏览器中添加正确的display。
 */

summary {
  display: list-item;
}

/* 脚本
   ========================================================================== */

/**
 * 在IE 9-中添加正确的display。
 */

canvas {
  display: inline-block;
}

/**
 * 在IE中添加正确的display。
 */

template {
  display: none;
}

/* 隐藏
   ========================================================================== */

/**
 * 在IE 10-中添加正确的display。
 */

[hidden] {
  display: none;
}

从Normalize.css源码中读到的 ==浏览器css兼容问题==:


本地编辑完再更新


*作者注:
*部分专有词汇和css属性值未做翻译
*有不恰当之处请联系译者Nirvana-zsy(hnuzsy@hnu.edu.cn)
*20170308
*关于转载:
*任何人可以进行注明出处转载、分享
*但不可在未经允许的情况下用于商业用途,感谢配合!
*详细参见Attribution-NonCommercial 3.0 License(https://creativecommons.org/licenses/by-nc/3.0/)

Normalize.css源码注释翻译&浏览器css兼容问题的理解的更多相关文章

  1. HashMap源码注释翻译

    HashMap.java(JDK1.8) 如有错误翻译的地方,欢迎评论指出. 介绍:对于HashMap及其子类而言,它们采用Hash算法来决定集合中元素的存储位置.当系统开始初始化HashMap时,系 ...

  2. normalize.css源码解析

    什么是normalize.css?  它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize. ...

  3. 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功,也必然成功 | 百篇博客分析OpenHarmony源码 | v13.02

    百篇博客系列篇.本篇为: v13.xx 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功,也必然成功 | 51.c.h .o 几点说明 kernel_liteos_a_note | 中文注解鸿蒙内核 ...

  4. 如何扒取一个网站的HTML和CSS源码

    一个好的前端开发,当看到一个很炫的页面的时候会本着学习的心态,想知道网站的源码.以下内容只是为了大家更好的学习,拒绝抄袭,支持正版. 1 首先我们要有一个chrome浏览器 2 在本地创建相关文件夹 ...

  5. Qt StyleSheet皮肤css源码

    使用方式如下 //设置皮肤样式 static void SetStyle(const QString &styleName) { QFile file(QString(":/imag ...

  6. 帮助你实现漂亮界面的14套免费的 HTML/CSS 源码

    在网络上能找很多免费的 PSD 格式素材,但是很少有 HTML/CSS 界面组件下载.在这篇文章中,收集了14套免费的 HTML/CSS 界面源码分享给前端设计师和开发者们.这些组件包括按钮.滑块.表 ...

  7. CSS源码之纯css3制作的哆啦a梦图片

    本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...

  8. BackboneJS 源码注释

    Backbone 作者在源码中做了很好的注释,这里只是锦上添花,补充一些个人的理解而已. // Backbone.js 1.2.3 // (c) 2010-2015 Jeremy Ashkenas, ...

  9. react源码总览(翻译)

    用react也有段时间了, 是时候看看人家源码了. 看源码之前看到官方文档 有这么篇文章介绍其代码结构了, 为了看源码能顺利些, 遂决定将其翻译来看看, 小弟英语也是半瓢水, 好多单词得查词典, 不当 ...

随机推荐

  1. 走进javascript——类型

    ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String ...

  2. 通过Servlet实现汉字验证码

    package com; import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Gra ...

  3. matlab笔记(1) 元胞结构cell2mat和num2cell

    摘自于:https://zhidao.baidu.com/question/1987862234171281467.html https://www.zybang.com/question/dcb09 ...

  4. 更快的理解js中循环嵌套

    [循环控制语句] break语句:终止本层循环,继续执行循环后面的语句:(当循环有多层时,break只会跳出一层循环) continue语句:跳过本次循环,继续执行下次循环: (对于for循环,con ...

  5. 学习笔记:javascript内置对象:数组对象

    1.数组对象的创建   1.设置一个长度为0的数组  var myarr=new array(); 2.设置一个长度为n的数组  var myarr=new arr(n); 3.声明一个赋值的指定长度 ...

  6. 【JAVAWEB学习笔记】18_el&jstl&javaee的开发模式

    一.EL技术 1.EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL 出现的目的是要替代jsp页面中脚本的编写. 2.EL从域中取出数据 ...

  7. win7电脑关机时间长怎么办

    最近遇到电脑关机慢的问题,其实电脑是装了ssd的,而且关掉了许多不需要的软件服务,为什么还是会出现关机慢的问题呢?开机是很快的. 所以我做了以下尝试: 1 win + r 运行 regedit 注册表 ...

  8. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  9. html学习笔记 - table表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 读《深入理解Java虚拟机》

    Java虚拟机运行时数据区 对象的创建 Java创建对象,在语言层面上使用new关键字.虚拟机遇到new关键字时,会检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的 ...