ChatGPT解决这个技术问题 Extra ChatGPT

浏览器对 HTML 元素的默认 CSS

在哪里可以找到浏览器的 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-weirdnesswebkit.org/blog/51/text-fields

t
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
O
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} 丢失。
E
Elias Zamaria

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


N
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}颜色:

我可以使用css过滤器:

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

我围绕 css 过滤器制作的工具栏,这些注释来自哪里:

https://github.com/webdev23/ponyFilters

一个更完整的代码笔示例:

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


它似乎有点偏,你是对的!这是我在这一天的辛勤工作。由于这只是 css,这不会改变浏览器元素的行为,但可以提供一种方法来在任何浏览器中以相同的颜色/亮度呈现这种元素,而无需为每个元素编写特殊代码。这在提出问题时是不可行的。谢谢。