浏览器对 HTML 元素的默认 CSS
Posted
技术标签:
【中文标题】浏览器对 HTML 元素的默认 CSS【英文标题】：Browsers' default CSS for HTML elements 【发布时间】：2011-07-29 00:08:18 【问题描述】：在哪里可以找到浏览器的 HTML 元素默认 CSS？
许多 html 元素带有一些默认的 CSS 属性，这些属性有时会导致未知/不需要的行为。例如，输入框在不同浏览器中的显示方式不同。我正在寻找一个涵盖新 CSS3 属性和新 HTML5 元素的地方。
我在其他（更老的）问题（例如Browsers' default CSS stylesheets）中看到了建议 CSS 重置解决方案的答案。这种解决方案有时是不需要的，通常我实际上想保留一些基本属性（例如 Chrome 中输入框的突出显示）。换句话说：我不想仅仅因为我不知道它们在做什么就摆脱它们。
那么，有没有网站可以为我提供所有这些信息（或者可能是大部分信息）？
【问题讨论】：
不是一个站点，但在 chrome 开发者工具中，它显示了继承的 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?的可能重复 【参考方案1】：每个浏览器都不一样，所以：
火狐（壁虎）： 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（闪烁）： 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，他们使用 Normalize 工具：necolas.github.com/normalize.css【参考方案2】：可以找到所有 W3C HTML 规范和供应商默认 CSS 样式表的 GitHub 存储库here
1。 Default Styles for Firefox
2。 Default Styles for Internet Explorer
3。 Default Styles for Chrome / Webkit
4。 Default Styles for Opera
5。 Default Styles for HTML4 (W3C spec)
6。 Default Styles for HTML5 (W3C 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
【讨论】：
在旁注中，看到 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 丢失。【参考方案3】：
没有人提到 Edge 中 CSS 默认值的任何来源。我看了看，找不到任何权威的东西，但我发现这个样式表看起来很合理：https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b
【讨论】：
【参考方案4】：虽然这是一个古老的跨浏览器问题，因为每个浏览器都有自己的渲染和行为，比如媒体和输入元素，我们现在可以在 2017 年非常安全地使用 css filters 属性在他们之上。
这允许提供带有 hue-rotate 过滤器的调色板，可以很好地跨浏览器呈现。
以下 sn-ps 展示了一种使用 输入类型颜色 的方法，通过 javascript 在视频元素上实时呈现此效果。
要仅使用 css，必须使用以下每个过滤器：棕褐色不为 0，高饱和度，灰度为 0，高对比度，然后根据我的测试给出具有 hue-rotate 属性的颜色。反转过滤器不是强制性的，但会产生一些深刻的影响。
同样，投影过滤器在跨浏览器上运行得非常好。 像这样使用：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>我可以使用 css 过滤器吗：
http://caniuse.com/#feat=css-filters
我围绕 css 过滤器制作的工具栏，这些注释来自哪里：
https://github.com/webdev23/ponyFilters
更完整的 codepen 示例：
http://codepen.io/Nico_KraZhtest/pen/bWExEB/
【讨论】：
好像有点偏题了，你说得对！这是我在这一天的辛勤工作。由于这只是 css，这不会改变浏览器元素的行为，但可以提供一种方法来在任何浏览器中以相同的颜色/亮度呈现这种元素，而无需为每个元素编写特殊代码。这在提出问题时是不可行的。谢谢。以上是关于浏览器对 HTML 元素的默认 CSS的主要内容，如果未能解决你的问题，请参考以下文章