浏览器对 HTML 元素的默认 CSS

Question

提问by Nachshon Schwartz

Where can I find a browser's default CSS for HTML elements?

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

Many HTML elements come with some default CSS properties which can sometimes result in unknown/unwanted behaviour. For example Input boxes are displayed differently in different browsers. I'm looking for a place that covers the new CSS3 properties and the new HTML5 elements.

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

I've seen in other (much older) questions (such as Browsers' default CSS stylesheets) answers that suggest a solution of CSS reset. This solution is sometimes not wanted, often I would actually like to keep some of the basic properties (such as the highlighting of input boxes in Chrome). In other words: I don't want to get rid of things just because I don't know what they do.

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

So, Is there a site that can give me all this information (or perhaps most)?

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

Answer 1

采纳答案by SW4

A GitHub repository of all W3C HTML spec and vendor default CSS stylesheets can be found here

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

1. Default Styles for Firefox

1. Firefox 的默认样式

2. Default Styles for Internet Explorer

2. Internet Explorer 的默认样式

3. Default Styles for Chrome / Webkit

3. Chrome / Webkit 的默认样式

4. Default Styles for Opera

4. Opera 的默认样式

5. Default Styles for HTML4 (W3C spec)

5. HTML4 的默认样式（W3C 规范）

6. Default Styles for HTML5 (W3C spec)

6. HTML5 的默认样式（W3C 规范）

Sample, per the default W3C HTML4 spec:

示例，根据默认的 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 }
}

Answer 2

回答by thirtydot

It's different for each browser, so:

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

Firefox (Gecko):https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css. Or, browse to resource://gre-resources/and look at 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
Internet Explorer (Trident), older versions: http://web.archive.org/web/20170122223926/http://www.iecss.com/

火狐（壁虎）：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
- 铬（闪烁）：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/

You can also look at the HTML5 Boilerplate stylesheet, which "normalizes the display of a lot of stuff without being a reset in the traditional sense". It also fixes quite a few bugs/inconsistencies.

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

It's also worth looking at: https://github.com/necolas/normalize.css/blob/master/normalize.css

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

Answer 3

回答by Elias Zamaria

No one has mentioned any source for the CSS defaults in Edge. I looked, and I couldn't find anything authoritative, but I found this stylesheet that looks plausible: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

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

Answer 4

回答by NVRM

While this is an old cross browser problem, as each browsers has his own rendering and behavior with some html elements like medias and inputs elements, we can now in 2017 use pretty safely the css filtersproprety on top of them.

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

This allow to give a color palette with the hue-rotatefilter that will render pretty well cross browsers.

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

The following snippets show a way to use a input type colorto render this effect in realtime on a video element with javascript.

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

To use only css, this is mandatory to use each one of this filters: sepia not at 0, high saturation, grayscale at 0, high contrast, and then give a color with the hue-rotate property, following my tests. The invert filter isn't mandatory, but is giving some deep effects.

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

As well, the drop-shadow filter is working pretty nicely cross browser. To be use like this: filter:drop-shadow(2px 20px 50px red) [X,Y,RADIUS,COLOR]

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

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()

body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}

Colors: 
<input 
       type="color"
       id="stylo"
       oninput="styloElem()"
       class="media"
       data-hue="0" />

<br><br> 

<video 
       controls
       id="media"        
       onplay="this.removeAttribute('controls');this.style.all='unset'"     
       onpause="this.controls='controls';styloElem()"
       src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>

Can i use css filters:

我可以使用 css 过滤器吗：

http://caniuse.com/#feat=css-filters

A toolbar I made around css filters, from where are coming this notes:

我围绕 css 过滤器制作的工具栏，从哪里来的这个注释：

https://github.com/webdev23/ponyFilters

A more complete codepen example:

一个更完整的 codepen 示例：

http://codepen.io/Nico_KraZhtest/pen/bWExEB/

浏览器对 HTML 元素的默认 CSS

提问by Nachshon Schwartz

采纳答案by SW4

1. Default Styles for Firefox

1. Firefox 的默认样式

2. Default Styles for Internet Explorer

2. Internet Explorer 的默认样式

3. Default Styles for Chrome / Webkit

3. Chrome / Webkit 的默认样式

4. Default Styles for Opera

4. Opera 的默认样式

5. Default Styles for HTML4 (W3C spec)

5. HTML4 的默认样式（W3C 规范）

6. Default Styles for HTML5 (W3C spec)

6. HTML5 的默认样式（W3C 规范）

回答by thirtydot

回答by Elias Zamaria

回答by NVRM

相关推荐

最近更新

标签

浏览器对 HTML 元素的默认 CSS

提问by Nachshon Schwartz

采纳答案by SW4

1. Default Styles for Firefox

1. Firefox 的默认样式

2. Default Styles for Internet Explorer

2. Internet Explorer 的默认样式

3. Default Styles for Chrome / Webkit

3. Chrome / Webkit 的默认样式

4. Default Styles for Opera

4. Opera 的默认样式

5. Default Styles for HTML4 (W3C spec)

5. HTML4 的默认样式（W3C 规范）

6. Default Styles for HTML5 (W3C spec)

6. HTML5 的默认样式（W3C 规范）

回答by thirtydot

回答by Elias Zamaria

回答by NVRM

相关推荐

Html 将两个或多个 Canvas 元素与某种混合相结合

Html 单击 JSP 中的 href 发送 post 请求

Html mailto 的语法

Html 在 DIV 内水平居中 UL

相关推荐

最近更新

标签