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（最新）
Opera（最新）

问题是：有人在这看到任何麻烦吗？我认为自己在CSS方面不太好，所以我不知道这是否会让我在将来遇到麻烦。

Obs。：此重置仅适用于跨浏览器问题。对于input，a，code之类的元素应该（或必须！）后面跟着通用规则，等等（例如：input类型为“text”无边界看不见！）。 我将在稍后添加类似通用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;
}

END

嗯，我试图改善我的重置越多，它看起来越meyer's css reset，所以我放弃并采用它。工作得很好：p

Answer 1

我一般认为广泛的CSS重置并不是最好的。我同意Russ Weakley的观点，他对三个大问题进行了“归零”：

必须重新定义重置的每个元素。 CSS文件大小＆amp;维护可以增加。
您可能会忘记重置某些内容。
某些重置对依赖键盘导航的用户有害。

在此处查看他的整个演示文稿：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;}

Answer 2

这是使用会影响一切的*。您无法使用“稍后”的样式表来获取input, select等的边框。

此外，*被认为对performance不利。首选使用显式标签。

如果您遇到Eric的问题，请尝试html5boilerplate's重置（不确定它是否会解决它们，但值得一试）

Answer 3

我唯一关心的是使用*选择器

导致的性能问题

Answer 4

我没有看到它的任何问题，如果你已经测试过它可行，那么应该没问题。

这个CSS重置好吗？

问题突然出现

修订版

END

4 个答案: