Question

在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无处可见（如果与它有任何关系......）。

感谢。

Answer 1

这些CSS规则已添加到您的浏览器中。每个浏览器都有自己的。这就是为什么浏览器差异多年来一直让网络开发人员痛苦的原因。

你可以使用CSS重置或标准化（两者都可以在网上找到）以避免这种情况，或者自己覆盖它们。

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

Answer 2

这就是一些浏览器在某些标签上提供合适的默认外观。一旦检测到它们，只需在样式表中覆盖它们即可。

Chrome会选择不存在的CSS规则（-webkit）

2 个答案: