浏览器对 HTML 元素的默认 CSS

html css cross-browser

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

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

我在其他（更老的）问题（例如 Browsers' default CSS stylesheets）中看到了建议 CSS 重置解决方案的答案。这种解决方案有时是不需要的，通常我实际上想保留一些基本属性（例如 Chrome 中输入框的突出显示）。换句话说：我不想仅仅因为我不知道他们在做什么而摆脱他们。

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

不是一个站点，而是在 chrome devleoper 工具中，它显示了继承的 css 规则，标记为“用户代理样式表”的那些将显示 chrome 规则。抱歉，我无法提供更多帮助。还有：dowebsitesneedtolookexactlythesameineverybrowser.com

请注意，reset.css 不会停止基本的事情。您的输入框仍会在 Chrome 中突出显示。您只会丢失浏览器之间的随机填充差异。因此，您可以从所有浏览器中的相同行为开始（填充/边距/...明智）。

@James Khoury - Firebug 也是如此。

@nayish：“例如，输入框在不同浏览器中的显示方式不同。” — 特别是关于表单字段，它们的样式不能完全使用 CSS 来描述。请参阅 meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness 和 webkit.org/blog/51/text-fields

How can I locate the default style sheet for a browser? 的可能重复项

thirtydot

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

火狐（壁虎）：https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css。或者，浏览到 resource://gre-resources/ 并查看 html.css。

Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+ /master/Source/core/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 stylesheet，它“标准化了很多东西的显示，而不是传统意义上的重置”。它还修复了很多错误/不一致。

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

有趣的是，这与我在 my answer 中与上面链接的问题所链接的内容大致相同，显然，“已过时”。虽然我只是在 2 天前添加了 IE 链接。

@nayish 除了浏览器默认设置之外，您认为还有什么？

@nayish 除了浏览器在其默认样式表中实现的内容之外，没有单独定义 HTML 元素的默认 CSS

@nayish 这是针对 each individual property in the spec 指定的，但请注意 CSS 意义上的不透明度 isn't inherited

请注意，HTML5 样板不仅仅是规范化 CSS。为了规范化 CSS，他们使用规范化工具：necolas.github.com/normalize.css

Offirmo

可以找到所有 W3C HTML 规范和供应商默认 CSS 样式表的 GitHub 存储库here

Gecko / Firefox 的默认样式 -- Internet Explorer 的默认样式 -- Webkit / Safari 的默认样式 -- Blink / Chrome 的默认样式 -- Opera 的默认样式 -- HTML4 的默认样式（W3C 规范） -- 的默认样式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 }
}

顺便说一句，在 W3C 的 HTML5 样式表中看到诸如臭名昭著的 nobr 标记之类的东西很有趣。

仍然是最新的？

Firefox 的链接不包含所有默认值。例如，它不包含 textarea 的默认 css。您可以在 resource://gre-resources/forms.css 中找到它。通常，浏览resource://gre-resources 中的文件以查找所有默认信息。或者对于所有浏览器，请参阅 html.spec.whatwg.org/multipage/rendering.html 。

ul {list-style-type: disc} 丢失。

Elias Zamaria

没有人提到 Edge 中 CSS 默认值的任何来源。我看了看，找不到任何权威的东西，但我发现这个样式表看起来很合理：https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

NVRM

虽然这是一个古老的跨浏览器问题，因为每个浏览器都有自己的渲染和行为，其中包含一些 html 元素，如媒体和输入元素，我们现在可以在 2017 年非常安全地在它们之上使用 css 过滤器属性。

这允许提供带有色调旋转过滤器的调色板，可以很好地跨浏览器呈现。

下面的代码片段展示了一种使用输入类型颜色在带有 javascript 的视频元素上实时呈现此效果的方法。

要仅使用 css，则必须使用以下每个过滤器：棕褐色不为 0、高饱和度、灰度为 0、高对比度，然后根据我的测试给出具有 hue-rotate 属性的颜色。反转过滤器不是强制性的，但会产生一些深刻的影响。

同样，阴影过滤器在跨浏览器上运行得非常好。像这样使用：filter:drop-shadow(2px 20px 50px red) [X,Y,RADIUS,COLOR]

函数 styloElem() { stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0) media.style.cssText += ";filter:sepia(100% ) 饱和(1000%) 灰度(0) 对比度(200%) 色相旋转("+ stylo.dataset.hue+"deg) 反转("+(stylo.dataset.hue/3.6)+"%)" } styloElem( ) 正文 { 文本对齐：中心；背景：#001;颜色：白色}视频{宽度：500px；最大宽度：500px}颜色：