浏览器对 HTML 元素的默认 CSS

Question

在哪里可以找到浏览器的 HTML 元素默认 CSS？

许多 HTML 元素带有一些默认的 CSS 属性，这些属性有时会导致未知/不需要的行为。例如输入框在不同的浏览器中显示不同。我正在寻找一个涵盖新的 CSS3 属性和新的 HTML5 元素的地方。

我在其他（更老的）问题（例如 浏览器的默认 CSS 样式表）中看到建议使用 CSS 重置解决方案的答案。这个解决方案有时并不需要，通常我实际上想保留一些基本属性（例如 Chrome 中输入框的突出显示）。换句话说： _我不想仅仅因为我不知道它们做什么就摆脱它们_。

那么， 是否有一个网站可以为我提供所有这些信息（或者可能是大部分信息）？

原文由 Nachshon Schwartz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可以在 恢复浏览器/规范默认 CSS 样式 中找到所有 W3C HTML 规范和供应商默认 CSS 样式表的 GitHub 存储库

1. Gecko / Firefox 的默认样式–
2. Internet Explorer 的默认样式–
3. Webkit / Safari 的默认样式–
4. Blink / Chrome 的默认样式–
5. Opera 的默认样式–
6. HTML4 的默认样式（W3C 规范） ——
7. HTML5 的默认样式（W3C 规范） ——

示例，根据默认的 W3C HTML4 规范：

 html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

原文由 SW4 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

每个浏览器都不一样，所以：

• Firefox（壁虎）： https ://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css。或者，浏览至 resource://gre-resources/ 并查看 html.css 。
• Safari（WebKit）： https ://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css
• Chrome（闪烁）： https ://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Trident) ，旧版本： http ://web.archive.org/web/20170122223926/http://www.iecss.com/

您还可以查看 HTML5 Boilerplate 样式表，它“规范化了大量内容的显示，而不是传统意义上的重置”。它还修复了很多错误/不一致。

它也值得一看： https ://github.com/necolas/normalize.css/blob/master/normalize.css

原文由 thirtydot 发布，翻译遵循 CC BY-SA 4.0 许可协议