html - 这个 CSS Reset 可以吗？

Question

我打算使用 Eric Meyer 的 CSS 重置，但我无意中发现了一些跨浏览器的差异(比如 input 边距)。基于此，我想出了一个更激进的方法:

(这个已经过时了，不要忘记在本题末尾查看当前修订版，随意批评)

/* CSS Reset by Hugo Leonardo. Based on Eric Meyer's CSS Reset (just google it). */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    text-decoration: none;

    /* in case "font: inherit" fails (IE7) */
    font-family: "times new roman";
    font-size: 100%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    /* remove this block if you DON'T want to support lame browsers */
}

:before, :after {
    content: '';
}

:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

table {
    /* "collapse" here is because of IE7 (maybe others?). don't remove it as it affects other browsers as well */
    border-collapse: collapse;
    border-spacing: 0;
}

/* this entire block was copied from Eric Meyer's CSS reset */
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

它在所有经过测试的浏览器中运行顺畅:

• IE7
• IE8
• Chrome(最新)
• Firefox(最新)
• 歌剧(最新)

问题是:有人看到这里有什么麻烦吗？我认为自己的 CSS 不太好，所以我不知道这是否会在未来给我带来任何麻烦。

观察:此重置仅针对跨浏览器问题。它应该(或必须!)遵循元素的通用规则，例如 input、a、code 等(例如:“文本”类型的输入 将在没有边框的情况下不可见!)。 我将在稍后添加诸如通用 a 样式之类的东西。现在我正在重新设置，摆脱(几乎)所有在主要浏览器中不一样的东西。

---

目前发现的问题

• * 选择器可能会导致性能问题。

• 具有某些规则的* 选择器会以无法恢复的方式覆盖元素的某些默认样式。例如:“提交”类型的 input 的默认样式。

• 令人惊讶的是 :before, :after { content: ''; 破坏了 Firefox 中的选择元素。

• 在修订版中，我尝试为所有输入元素设置 margin: 0。对于 checkbox 和 radio 类型的输入，大多数浏览器会忽略它。

---

修订版

/* CSS Reset by Hugo Leonardo Leão Mota
Based on Eric Meyer's CSS Reset: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
Helped by fellows in stackoverflow: http://stackoverflow.com/questions/6892982/is-this-css-reset-okay */

/* resetting style for every visible element except 'ruby' family and form controls
   browsers deal with controls (and ruby style) in their own way */
a, abbr, acronym, address, b, big, blockquote, body,
br, caption, cite, code, col, colgroup, dd, del, dfn, div,
dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i,
img, ins, kbd, label, legend, li, noscript, object, ol, p, pre, q, samp,
small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    text-decoration: none;

    /* in case "font: inherit" fails (IE7) */
    font-family: "times new roman";
    font-size: 100%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    /* remove this block if you DON'T want to support lame browsers */
}

/* browsers are free to handle controls but
   we can't let them mess up with the other elements  */
button, select, textarea,
input[type=text], input[type=password], input[type=submit],
input[type=image], input[type=reset], input[type=button], input[type=file] {
    margin: 0;
}



:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

table {
    /* "border-collapse" here is because of IE7 different behaviour (maybe others?).
       don't remove it as it affects other browsers as well */
    border-collapse: collapse;
    border-spacing: 0;
}

/* the next two blocks were copied from Eric Meyer's CSS reset */

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}

/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

---

结束

好吧，我越努力改进重置，它就越像 meyer's css reset ，所以我放弃了我的并采用了它。工作得很好 :p

Answer 1

我通常认为大范围的 CSS 重置并不是最好的。我同意拉斯·威克利 (Russ Weakley) 的观点，他将注意力集中在三个主要问题上:

1. 每个被重置的元素都必须重新定义。 CSS 文件大小和维护工作可能会增加。
2. 您可能会忘记重新设置您重置的内容的样式。
3. 某些重置对依赖键盘进行导航的用户有害。

在此处查看他的整个演示文稿:http://www.maxdesign.com.au/articles/css-reset/

具体来说，我认为不应重置以下内容，因为它在您的样式表中

:before, :after {
    content: '';
}

:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

focus 是一个可访问性问题。

ol 和 ul 应该有它们的默认样式。您可能需要它们。 (尽管您可能需要为导航覆盖它们。)

:link, :visited, :hover, :active 我只会在需要时重置这些。

正如您所提到和承认的那样，*{//} 可能会导致性能问题，并可能导致无法预料的问题。

另外，我会考虑添加一些东西来重置标题上的大顶部和底部边距

h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0;}