├── .gitattributes ├── .gitignore ├── README.md └── normalize-zh.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 前言 2 | Normalize-zh.css是根据对Normalize.css的源码分析后，经过学习与整理，将源代码中的英文注释文档翻译为中文版本，方便国内的开发者学习和使用，我深知此版本一定有很多不足，希望能得到大家的理解和支持，同样也很愿意和大家一起完善。 3 | 4 | 关于源码的解读细节，可以查看文档下方，可以阅读我发布在segmentfault上的系列文章 5 | 6 | * [关于CSS Reset 那些事（二）之 Normalize.css 源码解读](http://segmentfault.com/a/1190000003025718) 7 | * [关于CSS Reset 那些事（三）之 Normalize-zh.css 出炉](http://segmentfault.com/a/1190000003028985) 8 | 9 | 10 | ## Normalize 源码解读 11 | 12 | * 源码地址：[https://github.com/necolas/normalize.css/blob/master/normalize.css][21] 13 | * 源码版本：v3.0.3 14 | 15 | ### html与body 元素 16 | ``` 17 | /** 18 | * 1. Set default font family to sans-serif. 19 | * 2. Prevent iOS and IE text size adjust after device orientation change, 20 | * without disabling user zoom. 21 | */ 22 | html { 23 | font-family: sans-serif; /* 1 */ 24 | -ms-text-size-adjust: 100%; /* 2 */ 25 | -webkit-text-size-adjust: 100%; /* 2 */ 26 | } 27 | ``` 28 | 1. 设置全局的字体为sans-serif，关于中文字体的设置可参考 [Amaze UI][3] 29 | 2. 防止 iOS 横屏字号放大，同时保证在PC上 zoom 功能正常 30 | 31 | 第2个问题场景是这样，苹果IOS设备调整后会自动调整文字的大小，按照苹果的意图是为了提升用户体验，比如竖屏状态下是`14px`，转换为横屏时就变成了`20px`，把`text-size-adjust:100%`就不会调整字体大小了。 32 | 33 | 如果把值设置为`'text-size-adjust:none'`，那么就会导致用户无法放大缩小字体了。 34 | 35 | ``` 36 | /** 37 | * Remove default margin. 38 | */ 39 | 40 | body { 41 | margin: 0; 42 | } 43 | ``` 44 | 45 | * 修复浏览器默认边距，统一效果 46 | 47 | 48 | ### HTML5 元素 display definitions 49 | ``` 50 | /** 51 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 52 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 53 | * and Firefox. 54 | * Correct `block` display not defined for `main` in IE 11. 55 | */ 56 | 57 | article, 58 | aside, 59 | details, 60 | figcaption, 61 | figure, 62 | footer, 63 | header, 64 | hgroup, 65 | main, 66 | menu, 67 | nav, 68 | section, 69 | summary { 70 | display: block; 71 | } 72 | ``` 73 | 74 | * 修复 IE 8/9，HTML5新元素不能正确显示的问题，定义为`block`的元素 75 | * 修复 IE 10/11，`details` 和 `summary` 定义为 `block` 的元素 76 | * 修复 IE 11，`main`定义为 `block` 的元素 77 | 78 | 这个问题想必大家都已经非常清楚，当低版本浏览器遇到不识别的元素时，会默认把他们当成内联元素(`inline`)，这里重新定义成为`block`元素。 79 | 80 | ``` 81 | /** 82 | * 1. Correct `inline-block` display not defined in IE 8/9. 83 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 84 | */ 85 | 86 | audio, 87 | canvas, 88 | progress, 89 | video { 90 | display: inline-block; /* 1 */ 91 | vertical-align: baseline; /* 2 */ 92 | } 93 | ``` 94 | 95 | 1. 修复 IE 8/9，HTML5新元素不能正确显示的问题，定义为`inline-block`元素 96 | 2. 修复Chrome, Firefox, 和Opera的`progress`元素没有以baseline垂直对齐 97 | 98 | `progress`是HTML5的新标签，可以定义进度条，但是它Chrome, Firefox, 和Opera并没有已baseline垂直对齐。 99 | 100 | 101 | ``` 102 | /** 103 | * Prevent modern browsers from displaying `audio` without controls. 104 | * Remove excess height in iOS 5 devices. 105 | */ 106 | audio:not([controls]) { 107 | display: none; 108 | height: 0; 109 | } 110 | ``` 111 | 112 | * 对不支持`controls`属性的浏览器，`audio`元素给以隐藏 113 | * 移除iOS5设备中多余的高度 114 | 115 | 在IE8之前的浏览器是不支持`controls`属性，这里的办法是直接隐藏该元素 116 | 117 | ``` 118 | /** 119 | * Address `[hidden]` styling not present in IE 8/9/10. 120 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 121 | */ 122 | 123 | [hidden], 124 | template { 125 | display: none; 126 | } 127 | ``` 128 | 129 | * 修复 IE 7/8/9，Firefox 3 和 Safari 4 中`hidden`属性不起作用的问题 130 | * 在 IE，Safari，Firefox 22- 中隐藏`template`元素 131 | 132 | `template`标签用于HTML模板，大家应该都是用过HTML模版开发页面，这个标签是按照实际需求添加的，但是模板又不能在界面上显示，所以这里统一了样式，兼容旧浏览器。 133 | 134 | ### 链接 Links 135 | ``` 136 | /** 137 | * Remove the gray background color from active links in IE 10. 138 | */ 139 | 140 | a { 141 | background-color: transparent; 142 | } 143 | ``` 144 | 145 | * 去掉 IE 10+ 点击链接时的灰色背景 146 | 147 | 148 | ``` 149 | /** 150 | * Improve readability of focused elements when they are also in an 151 | * active/hover state. 152 | */ 153 | 154 | a:active, 155 | a:hover { 156 | outline: 0; 157 | } 158 | ``` 159 | 160 | * 去掉点击时的`outline`焦点框，同时保证使用键盘可以显示焦点框，这个操作针对所有浏览器 161 | 162 | 163 | 164 | ### 语义化文本标签 Text-level semantics 165 | ``` 166 | /** 167 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 168 | */ 169 | 170 | abbr[title] { 171 | border-bottom: 1px dotted; 172 | } 173 | ``` 174 | 175 | * 修正`abbr`元素在 Firefox 外其他浏览器没有下划线的问题 176 | 177 | 语义`abbr`标签是表示简称或缩写，自身的`title`属性是完整版，但是此标签在Firefox下默认有下边框，而其他浏览器中没有，这里统一了样式。 178 | 179 | ``` 180 | /** 181 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 182 | */ 183 | 184 | b, 185 | strong { 186 | font-weight: bold; 187 | } 188 | ``` 189 | 190 | * Firefox3+，Safari4/5 和 Chrome 中统一设置为粗体 191 | 192 | Firefox 3+, Safari 和 Chrome 给`b`和`strong`设置的属性是`bolder`，而不是`bold`，这里统一了样式。 193 | 194 | ``` 195 | /** 196 | * Address styling not present in Safari and Chrome. 197 | */ 198 | 199 | dfn { 200 | font-style: italic; 201 | } 202 | ``` 203 | * 修正 Safari5 和 Chrome 中没有样式的问题 204 | 205 | [`dfn `][4] 标签可标记那些对特殊术语或短语的定义，在Safari 和Chrome 里不是斜体，在这里统一了样式。 206 | 207 | ``` 208 | /** 209 | * Address variable `h1` font-size and margin within `section` and `article` 210 | * contexts in Firefox 4+, Safari, and Chrome. 211 | */ 212 | 213 | h1 { 214 | font-size: 2em; 215 | margin: 0.67em 0; 216 | } 217 | ``` 218 | 219 | * 修复 Firefox 4+，Safari 5 和 Chrome 中`section`和`article`内的`h1`字体大小 220 | 221 | ``` 222 | /** 223 | * Address styling not present in IE 8/9. 224 | */ 225 | 226 | mark { 227 | background: #ff0; 228 | color: #000; 229 | } 230 | ``` 231 | 232 | * 修复 IE 6/9， Safari 5 和 Chrome中样式不呈现的问题 233 | 234 | `mark`标签用来突出显示部分文本，设置后会有一个高亮背景，但是此标签是HTML5中的新标签，在低版本浏览器并不识别，所以需要重置样式。 235 | 236 | ``` 237 | 238 | /** 239 | * Address inconsistent and variable font size in all browsers. 240 | */ 241 | 242 | small { 243 | font-size: 80%; 244 | } 245 | ``` 246 | 247 | * 在所有浏览器中统一`small`的字体大小 248 | 249 | `small`标签在 HTML 4.01 就已经存在，HTML5 中增强了它的寓意，表示旁注信息，不过此标签在各个浏览器中呈现的字体大小不一样，在这里做了统一 250 | 251 | 252 | 253 | ``` 254 | /** 255 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 256 | */ 257 | 258 | sub, 259 | sup { 260 | font-size: 75%; 261 | line-height: 0; 262 | position: relative; 263 | vertical-align: baseline; 264 | } 265 | 266 | sup { 267 | top: -0.5em; 268 | } 269 | 270 | sub { 271 | bottom: -0.25em; 272 | } 273 | ``` 274 | 275 | * 防止所有浏览器中的`sub`和`sup`影响行高 276 | 277 | `sup`和`sub`两个标签是用来表示上标和下标，据HTML标准中对`small`，`sub`和`sup`的大小要求都是`smaller`，但是如上所示`normalize.css`给`small`设的是80%，而`sub`和`sup`却是75%，所以为了保持一致，且不影响其他元素的行高，把两者的`line-height`设为`0`，然后设置它的垂直以baseline开始，设置`top`和`bottom`手动设置两者偏移量 278 | 279 | ### 内嵌元素 Embedded content 280 | ``` 281 | /** 282 | * Remove border when inside `a` element in IE 8/9/10. 283 | */ 284 | 285 | img { 286 | border: 0; 287 | } 288 | ``` 289 | 290 | * 去除 IE6-9 和 Firefox 3 中`a`内部`img`元素默认的边框 291 | 292 | 在旧版本的浏览器中，图片默认会有一个奇丑无比的蓝色边框，这这里进行清除，统一样式。 293 | 294 | ``` 295 | /** 296 | * Correct overflow not hidden in IE 9/10/11. 297 | */ 298 | 299 | svg:not(:root) { 300 | overflow: hidden; 301 | } 302 | ``` 303 | 304 | * 修复 IE9 中的`overflow`的怪异表现 305 | 306 | ### 群组元素 Grouping content 307 | ``` 308 | /** 309 | * Address margin not present in IE 8/9 and Safari. 310 | */ 311 | 312 | figure { 313 | margin: 1em 40px; 314 | } 315 | ``` 316 | 317 | * 修复 IE 8/9、Safari中margin失效 318 | 319 | `figure` 是HTML5的新标签，用做文档插图，但它在 IE 8/9 and Safari 中的默认`margin`失效，这里做了统一设置。 320 | 321 | ``` 322 | /** 323 | * Address differences between Firefox and other browsers. 324 | */ 325 | 326 | hr { 327 | box-sizing: content-box; 328 | height: 0; 329 | } 330 | ``` 331 | 332 | * 修正 Firefox 和其他浏览器之间的差异 333 | 334 | 在 Firefox 中，`hr`元素的默认样式很多，和其它浏览器主要的差异有两点： 335 | 1.设置了`height`为`2px`; 336 | 2.`box-sizing`为`border-box`; 337 | 此样式对这两个问题进行重置，进行统一 338 | 339 | 340 | ``` 341 | /** 342 | * Contain overflow in all browsers. 343 | */ 344 | 345 | pre { 346 | overflow: auto; 347 | } 348 | ``` 349 | 350 | * 标签设置滚动条，内容溢出时出现 351 | 352 | 大部分浏览器的`pre`在`overflow`的时候会直接溢出去，这里加上`overflow:auto`让它出现滚动条 353 | 354 | ``` 355 | /** 356 | * Address odd `em`-unit font size rendering in all browsers. 357 | */ 358 | 359 | code, 360 | kbd, 361 | pre, 362 | samp { 363 | font-family: monospace, monospace; 364 | font-size: 1em; 365 | } 366 | ``` 367 | 368 | * 用于修复 Safari 5 和 Chrome 中奇怪的字体设置，统一字体样式 369 | 370 | ### 表单 Forms 371 | ``` 372 | /** 373 | * 1. Correct color not being inherited. 374 | * Known issue: affects color of disabled elements. 375 | * 2. Correct font properties not being inherited. 376 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 377 | */ 378 | 379 | button, 380 | input, 381 | optgroup, 382 | select, 383 | textarea { 384 | color: inherit; /* 1 */ 385 | font: inherit; /* 2 */ 386 | margin: 0; /* 3 */ 387 | } 388 | ``` 389 | 390 | 1. 修正所有浏览器中颜色不继承的问题 391 | 2. 修正所有浏览器中字体不继承的问题 392 | 3. 修正 Firefox 3+， Safari5 和 Chrome 中外边距不同的问题 393 | 394 | 有一些浏览器会把`form`表单中的一些元素 `textarea`，`text`，`button`，`select` 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体，并不会从父元素继承，所以这里重置了这些元素的默认样式。 395 | 396 | ``` 397 | /** 398 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 399 | */ 400 | 401 | button { 402 | overflow: visible; 403 | } 404 | ``` 405 | 406 | * 统一 IE 8/9/10/11 `overflow`属性为visible 407 | 408 | 在 IE 8/9/10/11里的`button`默认的`overflow`是`hidden`，这里统一为`visible` 409 | 410 | ``` 411 | /** 412 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 413 | * All other form control elements do not inherit `text-transform` values. 414 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 415 | * Correct `select` style inheritance in Firefox. 416 | */ 417 | 418 | button, 419 | select { 420 | text-transform: none; 421 | } 422 | ``` 423 | 424 | * 统一各浏览器`text-transform`不会继承的问题 425 | 426 | ``` 427 | /** 428 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 429 | * and `video` controls. 430 | * 2. Correct inability to style clickable `input` types in iOS. 431 | * 3. Improve usability and consistency of cursor style between image-type 432 | * `input` and others. 433 | */ 434 | 435 | button, 436 | html input[type="button"], /* 1 */ 437 | input[type="reset"], 438 | input[type="submit"] { 439 | -webkit-appearance: button; /* 2 */ 440 | cursor: pointer; /* 3 */ 441 | } 442 | ``` 443 | 444 | 1. 避免 Android 4.0.* 中的 WebKit bug ，该bug会破坏原生的`audio`和`video`的控制器 445 | 2. 更正 iOS 中无法设置可点击的`input`的问题 446 | 3. 统一其他类型的`input`的光标样式 447 | 448 | 这里将可点击的按钮，统一设置鼠标样式为`pointer`，提高了可用性 449 | 450 | ``` 451 | /** 452 | * Re-set default cursor for disabled elements. 453 | */ 454 | 455 | button[disabled], 456 | html input[disabled] { 457 | cursor: default; 458 | } 459 | ``` 460 | 461 | * 重置按钮禁用时光标样式 462 | 463 | ``` 464 | /** 465 | * Remove inner padding and border in Firefox 4+. 466 | */ 467 | 468 | button::-moz-focus-inner, 469 | input::-moz-focus-inner { 470 | border: 0; 471 | padding: 0; 472 | } 473 | ``` 474 | 475 | * 移除 Firefox 4+ 的内边距 476 | 477 | ``` 478 | /** 479 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 480 | * the UA stylesheet. 481 | */ 482 | 483 | input { 484 | line-height: normal; 485 | } 486 | ``` 487 | 488 | * 统一设置行高为normal 489 | 490 | Firefox浏览器会默认设置input[type="button"]的行高为`normal !important`，这里统一样式 491 | 492 | ``` 493 | /** 494 | * It's recommended that you don't attempt to style these elements. 495 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 496 | * 497 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 498 | * 2. Remove excess padding in IE 8/9/10. 499 | */ 500 | 501 | input[type="checkbox"], 502 | input[type="radio"] { 503 | box-sizing: border-box; /* 1 */ 504 | padding: 0; /* 2 */ 505 | } 506 | ``` 507 | 508 | 1. 修正 IE 8/9 box-sizing 被设置为`content-box`的问题 509 | 2. 移除 IE 8/9 中多余的内边距 510 | 511 | ``` 512 | /** 513 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 514 | * `font-size` values of the `input`, it causes the cursor style of the 515 | * decrement button to change from `default` to `text`. 516 | */ 517 | 518 | input[type="number"]::-webkit-inner-spin-button, 519 | input[type="number"]::-webkit-outer-spin-button { 520 | height: auto; 521 | } 522 | ``` 523 | 524 | * 修正 Chrome 中 `input [type="number"]` 在特定高度和 `font-size` 时,下面一个箭头光标变成`cursor: text` [效果](http://gtms04.alicdn.com/tps/i4/T18kd8FCtaXXc_FhcF-330-350.gif) 525 | 526 | ``` 527 | /** 528 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 529 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 530 | */ 531 | 532 | input[type="search"] { 533 | -webkit-appearance: textfield; /* 1 */ 534 | box-sizing: content-box; /* 2 */ 535 | } 536 | 537 | ``` 538 | 539 | 1. 修正 Safari 5 和 Chrome 中`appearance`被设置为`searchfield`的问题 540 | 2. 修正 Safari 5 和 Chrome 中`box-sizing`被设置为`border-box`的问题 541 | 542 | `searchfield`是CSS3的属性，它可以让一个`div`元素看上去像任何元素，但是浏览器支持性并不好， 543 | 544 | ``` 545 | /** 546 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 547 | * Safari (but not Chrome) clips the cancel button when the search input has 548 | * padding (and `textfield` appearance). 549 | */ 550 | 551 | input[type="search"]::-webkit-search-cancel-button, 552 | input[type="search"]::-webkit-search-decoration { 553 | -webkit-appearance: none; 554 | } 555 | ``` 556 | 557 | * 移除原生默认样式，统一`search`的输入框样式 558 | 559 | ``` 560 | /** 561 | * Define consistent border, margin, and padding. 562 | */ 563 | 564 | fieldset { 565 | border: 1px solid #c0c0c0; 566 | margin: 0 2px; 567 | padding: 0.35em 0.625em 0.75em; 568 | } 569 | ``` 570 | 571 | * 定义一致的边框、外边距和内边距 572 | 573 | ``` 574 | /** 575 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 576 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 577 | */ 578 | 579 | legend { 580 | border: 0; /* 1 */ 581 | padding: 0; /* 2 */ 582 | } 583 | ``` 584 | 585 | 1. 修正 IE 6-9 中颜色不能继承的问题 586 | 2. 重置内边距 587 | 588 | ``` 589 | /** 590 | * Remove default vertical scrollbar in IE 8/9/10/11. 591 | */ 592 | 593 | textarea { 594 | overflow: auto; 595 | } 596 | ``` 597 | 598 | * 移除 IE8-11 中默认的垂直滚动条 599 | 600 | ``` 601 | /** 602 | * Don't inherit the `font-weight` (applied by a rule above). 603 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 604 | */ 605 | 606 | optgroup { 607 | font-weight: bold; 608 | } 609 | ``` 610 | 611 | * 统一设置`optgroup`元素`font-weight`始终为`bold` 612 | 613 | ### 表格 Tables 614 | ``` 615 | /** 616 | * Remove most spacing between table cells. 617 | */ 618 | 619 | table { 620 | border-collapse: collapse; 621 | border-spacing: 0; 622 | } 623 | 624 | td, 625 | th { 626 | padding: 0; 627 | } 628 | 629 | ``` 630 | 631 | * 合并单元格边框，重置内边距 632 | 633 | 634 | 635 | [1]: http://necolas.github.io/normalize.css/ 636 | [2]: http://amazeui.org/css/normalize?_ver=2.x 637 | [3]: http://www.w3cfuns.com/topic-12.html 638 | [4]: http://tantek.com/log/2004/undohtml.css 639 | [5]: http://yui.github.io/yui2/ 640 | [6]: http://meyerweb.com/eric/tools/css/reset/index.html 641 | [7]: http://yuilibrary.com/yui/docs/cssreset/ 642 | [8]: http://docs.kissyui.com/index-1.1.6.html 643 | [9]: https://github.com/necolas/normalize.css 644 | [10]: http://www.zhihu.com/question/20094066 645 | [11]: http://segmentfault.com/q/1010000002991779/a-1020000002994616 646 | [12]: http://segmentfault.com/q/1010000000117189 647 | [13]: http://jerryzou.com/ 648 | [14]: http://nicolasgallagher.com/about-normalize-css/ 649 | [15]: http://jerryzou.com/posts/aboutNormalizeCss/ 650 | [16]: https://twitter.com/necolas 651 | [17]: https://twitter.com/jon_neal 652 | [18]: http://aliceui.org/docs/framework.html#base-%E9%87%8D%E8%AE%BE 653 | [19]: http://amazeui.org/css/normalize?_ver=2.x 654 | [20]: https://github.com/necolas/normalize.css/ 655 | [21]: https://github.com/necolas/normalize.css/ 656 | [22]: http://amazeui.org/css/typography 657 | [23]: http://www.w3school.com.cn/tags/tag_dfn.asp -------------------------------------------------------------------------------- /normalize-zh.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * @file: normalize-zh.css v3.0.3 5 | * @author: alsiso 6 | * @update: 2015年7月24日 08:25:13; 7 | * @copyright: 基于 normalize.css 源码解读与注释翻译 | MIT License 8 | */ 9 | 10 | 11 | /** 12 | * 1. 设置所有的字体为'sans-serif' 13 | * 2. 防止 iOS 横屏字号放大，同时保证在PC上 zoom 功能正常 14 | */ 15 | 16 | html { 17 | font-family: sans-serif; /* 1 */ 18 | -ms-text-size-adjust: 100%; /* 2 */ 19 | -webkit-text-size-adjust: 100%; /* 2 */ 20 | } 21 | 22 | /** 23 | * 修复默认边距，统一各浏览器效果 24 | */ 25 | 26 | body { 27 | margin: 0; 28 | } 29 | 30 | /* HTML5 显示属性定义 31 | ========================================================================== */ 32 | /** 33 | * 修复IE 8/9，HTML5新元素不能正确显示的问题，定义为 block的元素 34 | * 修复IE 10/11，'details' or 'summary' 定义为 block 的元素 35 | * 修复IE 11，'main'定义为 block 的元素 36 | */ 37 | 38 | article, 39 | aside, 40 | details, 41 | figcaption, 42 | figure, 43 | footer, 44 | header, 45 | hgroup, 46 | main, 47 | menu, 48 | nav, 49 | section, 50 | summary { 51 | display: block; 52 | } 53 | 54 | /** 55 | * 1. 修复IE 8/9，HTML5新元素不能正确显示的问题，定义为inline-block元素 56 | * 2. 修复Chrome, Firefox, 和Opera的'progress'元素没有以baseline垂直对齐 57 | */ 58 | 59 | audio, 60 | canvas, 61 | progress, 62 | video { 63 | display: inline-block; /* 1 */ 64 | vertical-align: baseline; /* 2 */ 65 | } 66 | 67 | /** 68 | * 对不支持'controls'属性的浏览器，'audio'元素给以隐藏 69 | * 移除iOS5设备中多余的高度 70 | */ 71 | 72 | audio:not([controls]) { 73 | display: none; 74 | height: 0; 75 | } 76 | 77 | /** 78 | * 修复 IE 7/8/9，Firefox 3 和 Safari 4 中 「hidden」属性不起作用的问题 79 | * 在IE、Safari、Firefox 22- 中隐藏「template」元素 80 | */ 81 | 82 | [hidden], 83 | template { 84 | display: none; 85 | } 86 | 87 | /* 链接 88 | ========================================================================== */ 89 | 90 | /** 91 | * 去掉 IE 10+ 点击链接时的灰色背景 92 | */ 93 | 94 | a { 95 | background-color: transparent; 96 | } 97 | 98 | /** 99 | * 去掉点击时的焦点框，同时保证使用键盘可以显示焦点框 100 | */ 101 | 102 | a:active, 103 | a:hover { 104 | outline: 0; 105 | } 106 | 107 | /* 语义化文字标签修复 108 | ========================================================================== */ 109 | 110 | /** 111 | * 修正「abbr」元素在 Firefox 外其他浏览器没有下划线的问题 112 | */ 113 | 114 | abbr[title] { 115 | border-bottom: 1px dotted; 116 | } 117 | 118 | /** 119 | * Firefox3+，Safari4/5 和 Chrome 中统一设置为粗体 120 | */ 121 | 122 | b, 123 | strong { 124 | font-weight: bold; 125 | } 126 | 127 | /** 128 | * 修正 Safari5 和 Chrome 中没有样式的问题 129 | */ 130 | 131 | dfn { 132 | font-style: italic; 133 | } 134 | 135 | /** 136 | * 对 h1 样式进行重置 137 | */ 138 | 139 | h1 { 140 | font-size: 2em; 141 | margin: 0.67em 0; 142 | } 143 | 144 | /** 145 | * 修正 IE6-11 中没有样式的问题 146 | */ 147 | 148 | mark { 149 | background: #ff0; 150 | color: #000; 151 | } 152 | 153 | /** 154 | * 统一 small 的字体大小 155 | */ 156 | 157 | small { 158 | font-size: 80%; 159 | } 160 | 161 | /** 162 | * 防止所有浏览器中的和影响行高 163 | */ 164 | 165 | sub, 166 | sup { 167 | font-size: 75%; 168 | line-height: 0; 169 | position: relative; 170 | vertical-align: baseline; 171 | } 172 | 173 | sup { 174 | top: -0.5em; 175 | } 176 | 177 | sub { 178 | bottom: -0.25em; 179 | } 180 | 181 | /* 嵌入元素 182 | ========================================================================== */ 183 | 184 | /** 185 | * 去除 IE6-9 和 Firefox 3 中 a 内部 img 元素默认的边框 186 | */ 187 | 188 | img { 189 | border: 0; 190 | } 191 | 192 | /** 193 | * 修复 IE9 中的「overflow」的怪异表现 194 | */ 195 | 196 | svg:not(:root) { 197 | overflow: hidden; 198 | } 199 | 200 | /* 内容分组 201 | ========================================================================== */ 202 | 203 | /** 204 | * 修复 IE 8/9、Safari中margin失效 205 | */ 206 | 207 | figure { 208 | margin: 1em 40px; 209 | } 210 | 211 | /** 212 | * 修正 Firefox 和其他浏览器之间的差异 213 | */ 214 | 215 | hr { 216 | box-sizing: content-box; 217 | height: 0; 218 | } 219 | 220 | /** 221 | * 标签应当包含滚溢出 222 | */ 223 | 224 | pre { 225 | overflow: auto; 226 | } 227 | 228 | /** 229 | * 统一代码的字体设置 230 | */ 231 | 232 | code, 233 | kbd, 234 | pre, 235 | samp { 236 | font-family: monospace, monospace; 237 | font-size: 1em; 238 | } 239 | 240 | /* 表单 241 | ========================================================================== */ 242 | 243 | /** 244 | * 1. 修正所有浏览器中颜色不继承的问题 245 | * 2. 修正所有浏览器中字体不继承的问题 246 | * 3. 修正 Firefox 3+， Safari5 和 Chrome 中外边距不同的问题 247 | */ 248 | 249 | button, 250 | input, 251 | optgroup, 252 | select, 253 | textarea { 254 | color: inherit; /* 1 */ 255 | font: inherit; /* 2 */ 256 | margin: 0; /* 3 */ 257 | } 258 | 259 | /** 260 | * 统一 IE 8/9/10/11 `overflow`属性为`visible` 261 | */ 262 | 263 | button { 264 | overflow: visible; 265 | } 266 | 267 | /** 268 | * 统一各浏览器`text-transform`不会继承的问题 269 | */ 270 | 271 | button, 272 | select { 273 | text-transform: none; 274 | } 275 | 276 | /** 277 | * 1. 避免 Android 4.0.* 中的 WebKit bug ，该bug会破坏原生的 278 | `audio`和`video`的控制器 279 | * 2. 更正 iOS 中无法设置可点击的`input`的问题 280 | * 3. 统一其他类型的`input`的光标样式 281 | */ 282 | 283 | button, 284 | html input[type="button"], /* 1 */ 285 | input[type="reset"], 286 | input[type="submit"] { 287 | -webkit-appearance: button; /* 2 */ 288 | cursor: pointer; /* 3 */ 289 | } 290 | 291 | /** 292 | * 重置按钮禁用时光标样式 293 | */ 294 | 295 | button[disabled], 296 | html input[disabled] { 297 | cursor: default; 298 | } 299 | 300 | /** 301 | * 移除 Firefox 4+ 的内边距 302 | */ 303 | 304 | button::-moz-focus-inner, 305 | input::-moz-focus-inner { 306 | border: 0; 307 | padding: 0; 308 | } 309 | 310 | /** 311 | * 统一设置`input`行高为`normal` 312 | */ 313 | 314 | input { 315 | line-height: normal; 316 | } 317 | 318 | /** 319 | * 320 | * 1. 修正 IE 8/9 box-sizing 被设置为「content-box」的问题 321 | * 2. 移除 IE 8/9 中多余的内边距 322 | */ 323 | 324 | input[type="checkbox"], 325 | input[type="radio"] { 326 | box-sizing: border-box; /* 1 */ 327 | padding: 0; /* 2 */ 328 | } 329 | 330 | /** 331 | * 修正 Chrome 中 input [type="number"] 在特定高度和`font-size`时, 332 | * 下面一个箭头光标变成`cursor: text` 333 | */ 334 | 335 | input[type="number"]::-webkit-inner-spin-button, 336 | input[type="number"]::-webkit-outer-spin-button { 337 | height: auto; 338 | } 339 | 340 | /** 341 | * 1. 修正 Safari 5 和 Chrome 中`appearance`被设置为`searchfield`的问题 342 | * 2. 修正 Safari 5 和 Chrome 中`box-sizing`被设置为`border-box`的问题 343 | */ 344 | 345 | input[type="search"] { 346 | -webkit-appearance: textfield; /* 1 */ 347 | box-sizing: content-box; /* 2 */ 348 | } 349 | 350 | /** 351 | * 移除原生默认样式，统一search的输入框样式 352 | */ 353 | 354 | input[type="search"]::-webkit-search-cancel-button, 355 | input[type="search"]::-webkit-search-decoration { 356 | -webkit-appearance: none; 357 | } 358 | 359 | /** 360 | * 定义一致的边框、外边距和内边距 361 | */ 362 | 363 | fieldset { 364 | border: 1px solid #c0c0c0; 365 | margin: 0 2px; 366 | padding: 0.35em 0.625em 0.75em; 367 | } 368 | 369 | /** 370 | * 1. 修正 IE 6-9 中颜色不能继承的问题 371 | * 2. 重置内边距 372 | */ 373 | 374 | legend { 375 | border: 0; /* 1 */ 376 | padding: 0; /* 2 */ 377 | } 378 | 379 | /** 380 | * 1. 移除 IE6-11 中默认的垂直滚动条 381 | */ 382 | 383 | textarea { 384 | overflow: auto; 385 | } 386 | 387 | /** 388 | * 统一设置optgroup元素font-weight始终为bold 389 | */ 390 | optgroup { 391 | font-weight: bold; 392 | } 393 | 394 | /* 表格 395 | ========================================================================== */ 396 | 397 | /** 398 | * 合并单元格边框，重置内边距 399 | */ 400 | 401 | table { 402 | border-collapse: collapse; 403 | border-spacing: 0; 404 | } 405 | 406 | td, 407 | th { 408 | padding: 0; 409 | } 410 | --------------------------------------------------------------------------------