Chrome 拾取不存在的 CSS 规则 (-webkit)答案

【问题标题】：Chrome picks up non-existent CSS rules (-webkit)Chrome 拾取不存在的 CSS 规则 (-webkit)
【发布时间】：2013-05-03 21:26:04
【问题描述】：

在 Chrome 中渲染网站时，我注意到某些 <input> 元素开始显得很奇怪。在检查 Chrome 内置开发人员工具中的元素时，我发现匹配的 -webkit CSS 规则在任何样式表中都不存在。比如下面的例子：

<input type="submit">

对此类元素没有规则，但这是 Crome 的开发人员工具显示的内容：

Matched CSS Rules:
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
-webkit-box-align: center;
...
}

有人知道我为什么会遇到这种情况吗？页面加载标准标题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML 5 没有被提及（如果这与它有关的话......）。

谢谢。

【问题讨论】：

不是用户代理样式？

标签： css google-chrome webkit

【解决方案1】：

这些 CSS 规则已融入您的浏览器。每个浏览器都有自己的。这就是为什么浏览器的差异多年来一直困扰着 Web 开发人员。

您可以使用 CSS 重置或规范化器（两者的网络上都有很多可用）来避免这种情况，或者自己覆盖它们。

最后，您还应该能够在浏览器中有效地更改这些内容，但是您应该知道您的网页看起来会与其他人看到的不同。

【讨论】：

【解决方案2】：

这就是一些浏览器在一些标签上呈现一个不错的默认外观所做的事情。检测到它们后，只需在样式表中覆盖它们即可。

【讨论】：