前几天Eric Meyer又思考了一下reset.css的问题，于是有所更新，具体为何要这样做，请看原文Reset Revisited。注意最开始的那句
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON
使用需谨慎！
- /* http://meyerweb.com/eric/tools/css/reset/
- v2.0b1 | 201101
- NOTE: WORK IN PROGRESS
- USE WITH CAUTION AND TEST WITH ABANDON */
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section, summary,
- time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
- body {
- line-height: 1;
- }
- ol, ul {
- list-style: none;
- }
- blockquote, q {
- quotes: none;
- }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- /* remember to define visible focus styles!
- :focus {
- outline: ?????;
- } */
- /* remember to highlight inserts somehow! */
- ins {
- text-decoration: none;
- }
- del {
- text-decoration: line-through;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
hi, 第48行outline: ?????; 是乱码还是本身就是那样写? outline没有这个属性吧
原文就是如此，:focus是用于设定获得焦点时候的样式的。比如鼠标点击链接后，出现的虚线框，这个虚线框就是outline来控制的。这里强调的是可访问性上的要求。有些用户无法使用鼠标，而只是用键盘tab导航，那这个时候如何凸显出当前获得焦点的元素，就是非常重要的了。因此，这里给出问号的目的在于，如果你不喜欢虚线框，虚线框与样式风格不符合，可以在这里重置，但必须给出新的样式，而不是仅仅把虚线框去掉，破坏可访问性。
这方面 Chrome 做的很好，链接和按钮用鼠标点击的时候没有虚线，用 Tab 键的时候有虚线，不需要专门用 CSS 或 JS 处理。其次是 Opera。