浏览器的HTML元素的默认CSS
我在哪里可以找到HTML元素的浏览器默认CSS？
许多HTML元素都带有一些默认的CSS属性，有时会导致未知/不需要的行为。 例如，输入框在不同的浏览器中显示的方式不同。 我正在寻找一个覆盖新的CSS3属性和新的HTML5元素的地方。
我在其他（较旧的）问题（例如浏览器的默认CSS样式表）中看到了提示CSS重置解决方案的答案。 这种解决方案有时候并不需要，我通常会希望保留一些基本属性（例如在Chrome中突出显示输入框）。 换句话说：我不想因为我不知道他们做了什么而摆脱事情。
那么， 有没有一个网站可以提供所有这些信息（或者大多数）？
所有W3C HTML规范和供应商默认CSS样式表的GitHub存储库可以在这里找到
1. Firefox的默认样式
2. Internet Explorer的默认样式
3. Chrome / Webkit的默认样式
4. Opera的默认样式
5. HTML4的默认样式（W3C规范）
6. 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 }
}
每个浏览器都不一样，所以：
resource://gre-resources/并查看html.css 。 您还可以查看HTML5 Boilerplate样式表，该样式表“规范化许多内容的显示，而不需要重新设置传统意义上的内容”。 它还修复了很多错误/不一致之处。
这也值得一看：https：//github.com/necolas/normalize.css/blob/master/normalize.css
虽然这是一个旧的跨浏览器问题，但由于每个浏览器都有自己的呈现和行为以及媒体和输入元素等一些html元素，因此我们现在可以在2017年相当安全地使用css过滤器。
这允许使用色调旋转过滤器来提供颜色调色板，该过滤器将呈现非常好的跨浏览器。
以下片段展示了一种使用输入类型颜色在JavaScript中实时渲染此视频元素的方法。
要仅使用css，必须使用以下每种滤镜：棕褐色不是0，高饱和度，灰度为0，高对比度，然后在测试后给出具有色调旋转属性的颜色。 倒置过滤器不是强制性的，但会产生一些深层次的影响。
同样，下拉阴影过滤器在浏览器上工作得非常好。 使用像这样：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>